Webpack 打包从 0 到 1 实战笔记

本文记录一次从零搭建 webpack 项目的完整过程，包括用到的命令、webpack 的核心概念以及打包原理，配合流程图帮助理解。

一、从 0 到 1 用了哪些命令

整个过程只需要三条核心命令：

bash 复制代码

# 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：

json 复制代码

"scripts": {
  "build": "webpack",
  "dev": "webpack --watch"
}

记忆口诀： npm install 装东西，npx webpack 打包。剩下都是配置文件的事。

二、项目结构

bash 复制代码

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：

javascript 复制代码

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/ 目录：

xml 复制代码

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 打包。

掌握这些，你就能理解大部分前端项目的打包配置了。