Webpack零基础入门教程
Webpack是JavaScript生态中主流的模块打包工具，能帮我们把分散的模块、资源整理成浏览器可运行的静态文件，很多开发者刚接触时不知道具体怎么操作。本文将从环境准备到实际打包，一步步带你掌握Webpack的基础用法。
前置环境准备
使用Webpack前需要先安装Node.js，你可以到Node.js官网下载对应系统的安装包，安装完成后在终端输入以下命令验证是否安装成功：
node -v npm -v
如果能看到对应的版本号，说明环境已经准备就绪。
初始化项目
先创建一个空的项目文件夹，进入文件夹后执行初始化命令：
mkdir webpack-demo cd webpack-demo npm init -y
执行完成后会生成package.json文件，这是项目的配置文件，里面记录了项目的基本信息和依赖项。
安装Webpack依赖
接下来安装Webpack和Webpack CLI到项目开发依赖中，这两个工具分别负责执行打包逻辑和提供命令行操作能力：
npm install webpack webpack-cli --save-dev
安装完成后package.json的devDependencies字段里会出现对应的依赖项，说明安装成功。
编写基础代码
在项目根目录创建src文件夹，在里面新建index.js作为入口文件，写一段简单的测试代码：
// src/index.js
function sayHello(name) {
return `Hello, ${name}`;
}
console.log(sayHello('Webpack'));这段代码定义了一个简单的函数，调用后会在控制台输出问候语，后续我们会把它作为Webpack的打包入口。
配置Webpack
在项目根目录新建webpack.config.js文件，这是Webpack的核心配置文件，基础配置如下：
// webpack.config.js
const path = require('path');
module.exports = {
// 入口文件，指定Webpack从哪个文件开始打包
entry: './src/index.js',
// 输出配置，指定打包后的文件相关信息
output: {
// 输出文件的名称
filename: 'bundle.js',
// 输出路径，使用绝对路径，这里指定输出到项目根目录的dist文件夹
path: path.resolve(__dirname, 'dist')
},
// 打包模式，development为开发模式，打包后代码可读性好，production为生产模式，会压缩代码减小体积
mode: 'development'
};上面的配置已经能满足基础的打包需求，后续如果有处理CSS、图片等资源的需求，再在这个配置里添加对应的loader和插件即可。
添加打包脚本
打开package.json文件，在scripts字段里添加打包命令，这样就可以通过npm run build来执行打包操作：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.88.0",
"webpack-cli": "^5.1.4"
}
}执行打包并验证结果
在终端执行打包命令：
npm run build
执行完成后，项目根目录会出现dist文件夹，里面包含打包生成的bundle.js文件。你可以新建一个HTML文件引入这个JS文件，在浏览器中打开控制台，就能看到之前写的问候语输出，说明打包成功。
常见注意事项
- 如果需要对HTML文件进行处理，可以安装html-webpack-plugin插件，它会自动生成引入打包后JS的HTML文件。
- 如果项目中有CSS文件，需要安装css-loader和style-loader，在Webpack配置的module.rules里添加对应规则，才能让Webpack处理CSS资源。
- 开发阶段可以使用webpack-dev-server启动本地开发服务器，支持热更新，不需要每次修改代码都手动执行打包命令。
WebpackJavaScript模块打包loaderplugin修改时间：2026-05-24 22:49:14