本文记录一次从零搭建 webpack 项目的完整过程，包括用到的命令、webpack 的核心概念以及打包原理，配合流程图帮助理解。
一、从 0 到 1 用了哪些命令
整个过程只需要三条核心命令：
# 1. 初始化项目（如果没有 package.json）
npm init -y
# 2. 安装依赖（webpack 本体 + CLI + 各种 loader + plugin + babel）
npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env css-loader style-loader html-webpack-plugin --save-dev
# 3. 执行打包
npx webpack
也可以在 package.json 里配置 script，之后用 npm run build 代替 npx webpack：
"scripts": {
"build": "webpack",
"dev": "webpack --watch"
}
记忆口诀： npm install 装东西，npx webpack 打包。剩下都是配置文件的事。
二、项目结构
webpack-demo/
├── package.json # 依赖和脚本
├── webpack.config.js # webpack 配置（核心）
├── .babelrc # babel 转译配置
├── index.html # HtmlWebpackPlugin 的模板
└── src/
├── index.js # 入口文件
├── greet.js # 被 import 的模块
└── style.css # 样式文件
三、webpack 五个核心概念
| 概念 | 作用 | 配置示例 |
|---|---|---|
| entry 入口 | 从哪个文件开始分析依赖 | entry: './src/index.js' |
| output 输出 | 打包结果放哪、叫什么 | output: { path, filename } |
| loader 加载器 | 让 webpack 能处理非 JS 文件（css、图片等） | module.rules |
| plugin 插件 | 扩展功能（生成 html、压缩、清理等） | plugins: [...] |
| mode 模式 | development 不压缩 / production 压缩优化 | mode: 'development' |
四、webpack 打包流程
webpack 的打包过程可以用一张流程图概括：
简单来说：webpack 从入口出发，沿着 import 语句递归找到所有依赖，用对应的 loader 把非 JS 文件翻译成 JS 能理解的形式，最后全部合并成一个或多个 bundle 文件输出。
五、loader 和 plugin 的区别
loader（加载器）
负责翻译文件。webpack 本身只懂 JS，遇到 .css、.png、.ts 等文件时，需要 loader 把它们转换成模块。
示例：css-loader、babel-loader、ts-loader
plugin（插件）
负责干杂活，扩展 webpack 能力。在打包的各个生命周期节点执行任务，比如生成 HTML、清理目录、压缩代码。
示例：HtmlWebpackPlugin、CleanWebpackPlugin
六、配置文件详解
这是本项目的 webpack.config.js：
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development', // 打包模式
entry: './src/index.js', // 入口
output: { // 输出
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
clean: true,
},
module: { // loader 规则
rules: [
{ test: /.js$/, exclude: /node_modules/, use: 'babel-loader' },
{ test: /.css$/, use: ['style-loader', 'css-loader'] },
],
},
plugins: [ // 插件
new HtmlWebpackPlugin({ template: './index.html' }),
],
}
注意 loader 执行顺序： use 数组里的 loader 是从右往左执行的。例如处理 css 时，先 css-loader 解析 css，再 style-loader 把样式注入页面。
七、打包产物
执行 npx webpack 后，生成 dist/ 目录：
dist/
├── bundle.js # 所有 JS + CSS 合并后的产物（24KB）
└── index.html # 自动注入了 <script src="bundle.js">
浏览器打开 dist/index.html 即可看到效果。所有原本分散的模块（index.js、greet.js、style.css）都被打包进了一个 bundle.js。
八、mode 对比
| mode | 是否压缩 | bundle 大小 | 适用场景 |
|---|---|---|---|
| development | 否 | 较大（约 24KB） | 本地开发，便于调试 |
| production | 是 | 小很多（约几 KB） | 上线部署 |
总结
- webpack 本质是一个模块打包器，从入口出发递归收集所有依赖，合并成 bundle。
- webpack 本身只认识 JS，其他文件靠 loader 翻译，plugin 负责扩展功能。
- 五个核心概念：entry、output、loader、plugin、mode。
- 日常命令就两条：
npm install装依赖，npx webpack打包。
掌握这些，你就能理解大部分前端项目的打包配置了。
