用搬家公司的例子来入门webpack

📚 官方文档：Webpack 官网 | Webpack 中文文档

🚀 实践项目：webpack-simple-demo - 本文档的完整示例项目

Webpack 主要是干什么的？

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（static module bundler）。简单来说，它就是把你的项目中的各种文件（TS、Less、JS、CSS、图片等）打包成一个或多个浏览器可以直接使用的文件。特别像搬家公司，把你的东西打包进各种盒子里。 英文中"bundle"意为"捆扎、打包"，形象地描述了将多个松散文件整合为单一或少量文件的过程。 想象你打包东西，也是一样，把一堆东西打包成一个或多个包装。

核心功能（用简单的话理解）- 打包、依赖、转换、优化

1. 模块打包 📦

• 作用：把分散的多个文件合并成少数几个文件
• 比喻：就像把一堆散乱的积木组装成一个完整的模型
• 实际效果：原本 100 个 JS 文件 → 打包后变成 2-3 个文件

2. 依赖管理 🔗

• 作用：自动处理文件之间的依赖关系
• 比喻：就像一个智能管家，知道先加载哪个文件，后加载哪个文件
• 实际效果：你不用手动管理 <script> 标签的顺序

3. 资源转换 🔄

• 作用：把各种格式的文件转换成浏览器能理解的格式
• 例子：
  • Sass/SCSS → CSS
  • TypeScript → JavaScript
  • ES6+ → ES5（兼容老浏览器）
  • 图片优化和压缩

4. 代码优化 ⚡

• 作用：压缩代码、删除无用代码、合并重复代码
• 效果：文件变小，加载更快

用生活例子理解：

想象你要搬家：

• Webpack = 搬家公司
• 你的文件 = 家里的物品
• 打包过程 = 整理装箱
• 最终结果 = 整齐的搬家箱子

搬家公司会：

1. 把散乱的物品整理好（模块打包）
2. 知道哪些物品要一起放（依赖管理）
3. 把大件拆解成小件方便运输（格式转换）
4. 用最少的箱子装最多的东西（代码优化）

Webpack 核心概念详解

1. Entry（入口） 🚪

• 定义：告诉 Webpack 从哪个文件开始打包
• 搬家比喻：就像搬家公司问"从哪个房间开始收拾？"
• 实际例子：src/index.js 就是入口，Webpack 从这里开始分析依赖
• 重要性：入口决定了整个依赖图的起点

2. Output（输出） 📦

• 定义：告诉 Webpack 把打包后的文件放在哪里
• 搬家比喻：就像告诉搬家公司"把箱子都放到新家的客厅"
• 实际例子：dist/bundle.js 就是输出文件
• 配置：可以设置文件名、路径、公共路径等

3. Loaders（加载器） 🔧

• 定义：告诉 Webpack 如何处理不同类型的文件
• 搬家比喻：就像搬家公司有专门的工具处理不同物品
  • 易碎品用泡沫包装（CSS Loader）
  • 大件家具要拆解（Babel Loader）
  • 衣服要折叠压缩（Terser Loader）
• 常见 Loaders：
  • babel-loader：处理 JavaScript
  • css-loader：处理 CSS
  • file-loader：处理图片、字体等
  • sass-loader：处理 Sass/SCSS

4. Plugins（插件） 🛠️

• 定义：扩展 Webpack 功能的工具
• 搬家比喻：就像搬家公司提供的增值服务
  • 清洁服务（HtmlWebpackPlugin）
  • 保险服务（压缩优化插件）
  • 监控服务（开发服务器）
• 常见 Plugins：
  • HtmlWebpackPlugin：自动生成 HTML
  • MiniCssExtractPlugin：提取 CSS
  • CleanWebpackPlugin：清理输出目录

5. Mode（模式） ⚙️

• 定义：告诉 Webpack 使用哪种模式（开发/生产）
• 搬家比喻：就像告诉搬家公司"这是临时搬家还是永久搬家"
• 开发模式：快速打包，保留调试信息
• 生产模式：优化打包，压缩代码

6. Module（模块） 📄

• 定义：项目中的每个文件都是一个模块
• 搬家比喻：就像家里的每个房间、每件物品
• 特点：模块之间可以有依赖关系
• 处理：Webpack 会分析模块间的依赖关系

7. Chunk（代码块） 🧩

• 定义：打包后的代码块
• 搬家比喻：就像整理后的搬家箱子
• 类型：
  • Entry Chunk：入口代码块
  • Vendor Chunk：第三方库代码块
  • Common Chunk：公共代码块

8. Dependency Graph（依赖图） 🕸️

• 定义：模块之间的依赖关系图
• 搬家比喻：就像搬家前的物品清单和摆放关系图
• 作用：Webpack 根据依赖图决定打包顺序
• 特点：有向无环图（DAG）

搬家比喻完整版 🏠

想象你要搬家，Webpack 就是专业的搬家公司：

构建项目 - 理解 webpack

💡 完整示例：本文档的所有代码示例都可以在 webpack-simple-demo 项目中找到

1mkdir webpack-simple-demo
2cd webpack-simple-demo
3pnpm init -y
4

package.json 增加脚本

1{
2  "name": "webpack-simple-demo",
3  "version": "1.0.0",
4  "description": "",
5  "main": "src/index.js",
6  "scripts": {
7    "test": "echo \"Error: no test specified\" && exit 1",
8    "build": "webpack",
9    "build:prod": "webpack --mode=production",
10    "dev": "webpack --mode=development"
11  },
12  "keywords": ["webpack"],
13  "license": "MIT",
14  "devDependencies": {
15    "webpack": "^5.44.0",
16    "webpack-cli": "^4.7.2"
17  }
18}
19

webpack.config.js

1const path = require('path');
2module.exports = {
3  entry: './src/index.js',
4  output: {
5    filename: 'bundle.js',
6    path: path.resolve(__dirname, 'dist'),
7  },
8};
9

src/ 目录结构

src/double.js

1function double(a) {
2  return a * 2;
3}
4
5module.exports = {
6  double,
7};
8

src/sumDouble.js

1const { double } = require('./double');
2function sumDouble(a, b) {
3  return double(a + b);
4}
5
6module.exports = {
7  sumDouble,
8};
9

src/index.js

1const { sumDouble } = require('./sumDouble');
2
3console.log(sumDouble(1, 2));
4
5var indexExport = 'indexExport';
6module.exports = {
7  indexExport,
8};
9

运行构建

1pnpm install
2pnpm run build
3

那么会生成一个 dist/bundle.js 文件，这个文件是打包后的文件，包含了所有的依赖和模块。

分析 dist/bundle.js 文件

bundle.js 文件是一个自执行函数，包含了三个主要部分：

1. 模块定义区域，存储了所有模块(有导出内容的)的代码，以键值对的形式存储。键是模块路径，值是函数，函数接收三个参数，分别是模块对象，导出对象，require 函数，函数内部是模块的代码。
2. 模块缓存系统，存储了所有模块的缓存结果，以键值对的形式存储。键是模块路径，值是对象，对象的结构是 { exports: {} }，exports 是模块的导出对象。
3. 入口模块执行，执行入口模块的代码，会调用 require 函数，require 函数会调用模块缓存系统，如果模块缓存系统中存在，则直接返回缓存结果，否则会调用模块定义区域，执行模块的代码，设置模块的导出对象，然后缓存结果，最后返回模块的导出对象。

这里注意，src 中的模块里 require 语句会替换为 __webpack_require__ 函数。__webpack_require__ 函数是 Webpack 自己实现的 require 函数，用来替代 Node.js 的 require。它负责加载和管理模块。功能是：检查缓存、创建模块、执行模块、返回导出对象。

1(() => {
2  // 1.模块定义区域
3  var __webpack_modules__ = {
4    './src/double.js': (module) => {
5      function double(a) {
6        return a * 2;
7      }
8      module.exports = {
9        double,
10      };
11    },
12    './src/index.js': (
13      module,
14      __unused_webpack_exports,
15      __webpack_require__
16    ) => {
17      // require 语句被替换为 __webpack_require__ 函数
18      const { sumDouble } = __webpack_require__('./src/sumDouble.js');
19      console.log(sumDouble(1, 2));
20      var indexExport = 'indexExport';
21      module.exports = {
22        indexExport,
23      };
24    },
25    './src/sumDouble.js': (
26      module,
27      __unused_webpack_exports,
28      __webpack_require__
29    ) => {
30      const { double } = __webpack_require__('./src/double.js');
31      function sumDouble(a, b) {
32        return double(a + b);
33      }
34      module.exports = {
35        sumDouble,
36      };
37    },
38  };
39  // 2.模块缓存系统
40  var __webpack_module_cache__ = {};
41
42  function __webpack_require__(moduleId) {
43    // 1.检查缓存
44    var cachedModule = __webpack_module_cache__[moduleId];
45    // 2.如果缓存中存在，则直接返回缓存模块的导出对象
46    if (cachedModule !== undefined) {
47      return cachedModule.exports;
48    }
49    // 3.如果缓存中不存在，则创建新的模块对象
50    var module = (__webpack_module_cache__[moduleId] = {
51      exports: {},
52    });
53    // 4.执行模块的代码
54    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
55    // 5.返回模块的导出对象
56    return module.exports;
57  }
58
59  // 3.入口模块执行
60  var __webpack_exports__ = __webpack_require__('./src/index.js');
61})();
62

代码执行逻辑详细分析 🔍

🎯 整体执行流程

这段代码的执行可以分为以下几个关键阶段：

第1阶段：初始化阶段

1(() => {
2  // 1.模块定义区域
3  var __webpack_modules__ = { ... };
4  // 2.模块缓存系统
5  var __webpack_module_cache__ = {};
6

作用：创建模块定义对象和缓存系统，为后续模块加载做准备。

第 2 阶段：入口模块加载

1var __webpack_exports__ = __webpack_require__('./src/index.js');
2

作用：从入口模块开始执行，触发整个依赖链的加载。

🔄 详细执行步骤分析

步骤 1：调用入口模块

1__webpack_require__('./src/index.js');
2

执行过程：

1. 检查缓存：__webpack_module_cache__['./src/index.js'] 不存在
2. 创建模块：module = { exports: {} }
3. 执行模块：调用 __webpack_modules__['./src/index.js'](module, module.exports, __webpack_require__)

步骤 2：index.js 模块执行

1// index.js 模块代码
2const { sumDouble } = __webpack_require__('./src/sumDouble.js');
3console.log(sumDouble(1, 2));
4var indexExport = 'indexExport';
5module.exports = { indexExport };
6

执行过程：

1. 遇到 require：__webpack_require__('./src/sumDouble.js') 被调用
2. 暂停执行：index.js 暂停，等待 sumDouble.js 加载完成

步骤 3：sumDouble.js 模块加载

1// sumDouble.js 模块代码
2const { double } = __webpack_require__('./src/double.js');
3function sumDouble(a, b) {
4  return double(a + b);
5}
6module.exports = { sumDouble };
7

执行过程：

1. 检查缓存：__webpack_module_cache__['./src/sumDouble.js'] 不存在
2. 创建模块：module = { exports: {} }
3. 遇到 require：__webpack_require__('./src/double.js') 被调用
4. 暂停执行：sumDouble.js 暂停，等待 double.js 加载完成

步骤 4：double.js 模块加载

1// double.js 模块代码
2function double(a) {
3  return a * 2;
4}
5module.exports = { double };
6

执行过程：

1. 检查缓存：__webpack_module_cache__['./src/double.js'] 不存在
2. 创建模块：module = { exports: {} }
3. 执行模块：定义 double 函数
4. 设置导出：module.exports = { double }
5. 返回结果：返回 { double } 给 sumDouble.js

步骤 5：sumDouble.js 继续执行

1// 现在 double 函数已经可用
2function sumDouble(a, b) {
3  return double(a + b); // double(1 + 2) = double(3) = 6
4}
5module.exports = { sumDouble };
6

执行过程：

1. 继续执行：double 函数已经加载完成
2. 定义函数：sumDouble 函数被定义
3. 设置导出：module.exports = { sumDouble }
4. 返回结果：返回 { sumDouble } 给 index.js

步骤 6：index.js 继续执行

1// 现在 sumDouble 函数已经可用
2console.log(sumDouble(1, 2)); // 输出：6
3var indexExport = 'indexExport';
4module.exports = { indexExport };
5

执行过程：

1. 继续执行：sumDouble 函数已经加载完成
2. 调用函数：sumDouble(1, 2) 执行，返回 6
3. 输出结果：console.log(6) 输出 6
4. 设置导出：module.exports = { indexExport }
5. 返回结果：返回 { indexExport } 给入口

🏠 搬家比喻完整版

想象这是一个三层楼的搬家过程：

🔍 关键执行特点

1. 同步执行

• 模块加载是同步的，必须等待依赖模块加载完成
• 不会出现异步加载的情况

1. 依赖链式加载

1index.js → sumDouble.js → double.js
2

• 从最底层开始，逐层向上返回

1. 缓存机制

• 每个模块只执行一次
• 后续调用直接返回缓存结果

1. 作用域隔离

• 每个模块都有独立的作用域
• 通过 module.exports 和 require 通信

💡 执行结果

最终执行结果：

1. 控制台输出：6
2. 模块导出：{ indexExport: 'indexExport' }
3. 缓存状态：三个模块都被缓存

这段代码展示了 Webpack 模块系统的核心机制：

• ✅ 模块化：每个模块独立执行
• ✅ 依赖管理：自动处理模块间的依赖关系
• ✅ 缓存优化：避免重复加载
• ✅ 同步执行：确保依赖关系正确

搬家比喻：就像三层楼的搬家，从顶层开始，逐层向下收集需要的东西，最后完成整个搬家过程！🏠

输出的文件名配置

真实的项目中，output 的输出文件名配置通常是动态的，根据入口文件的名称和哈希值来生成。 而哈希值有三种类型：

• hash：基于整个项目的构建内容生成全局唯一哈希值，同一次构建过程中所有文件的 hash 值相同，适用于开发环境或需要强制更新所有资源的场景
• chunkhash：根据入口文件（chunk）及其依赖模块的内容生成独立哈希值，不同入口文件的 chunkhash 互不影响，用于入口 JS 文件命名，例如 [name].[chunkhash].js
• contenthash：基于文件自身内容生成哈希值，仅当文件内容变化时才会更新，适用于抽离的 CSS 文件或静态资源，避免因关联文件修改导致不必要的缓存失效，例如 [name].[contenthash].css

1entry: {
2  page1: './src/page1.js',
3  page2: './src/page2.js',
4},
5output: {
6  filename: '[name].[chunkhash:8].bundle.js',
7  path: path.resolve(__dirname, 'dist'),
8}
9

src 建立四个文件，2 个入口文件，2 个依赖文件：

1// src/page1.js
2var page1 = require('./page1-a');
3console.log('page1');
4console.log(page1);
5
6// src/page2.js
7var page2 = require('./page2-a');
8console.log('page2');
9console.log(page2);
10
11// src/page1-a.js
12module.exports = 'page1-a';
13
14// src/page2-a.js
15module.exports = 'page2-a';
16

执行 build 之后：

1// dist/page1.18656d4d.bundle.js
2// dist/page2.18656d4d.bundle.js
3

如果只有 page1.js 进行修改，那么 page1.bundle.js 的哈希值会变化，而 page2.bundle.js 的哈希值不会变化。

loader 的配置 - 文件类型转换

📖 官方文档：Webpack Loaders | Loader API

Webpack 中的 Loader 是用于将非 JavaScript 模块（如 CSS、图片、TypeScript 等）转换为 Webpack 能处理的模块的工具。它们像"翻译员"一样，通过链式调用对文件进行多步转换。

webpack-simple-demo 项目中，我们使用了 ts-loader 来将 ts 文件转换为 js 文件。

webpack.config.js 中，配置了 extensions 和 module.rules。extensions 配置了文件的扩展名，module.rules 配置了 loader 的规则。
rules 中，我们配置了 ts-loader 来将 ts 文件转换为 js 文件。test 属性是正则表达式，用于匹配文件。use 属性是 loader 的名称。exclude 属性是排除的文件。include 属性是包含的文件。include 和 exclude 是互斥的，只能配置一个。

先配置 package.json：

1"devDependencies": {
2  "typescript": "^5.0.0",
3  "ts-loader": "^9.4.0",
4  "@types/node": "^20.0.0",
5}
6

然后配置 webpack.config.js：

1// 模块解析
2  resolve: {
3    extensions: ['.ts', '.js'],
4  },
5
6  // 模块规则
7  module: {
8    rules: [
9      {
10        test: /\.ts$/,
11        use: 'ts-loader',
12        exclude: /node_modules/,
13      },
14    ],
15  },
16

src 的文件结构如下：

1// src/page1.ts
2import page1A from './page1-a';
3console.log(page1A);
4
5// src/page1-a.ts
6export default 'page1-a';
7
8// src/page2.ts
9import page2A from './page2-a';
10console.log(page2A);
11
12// src/page2-a.ts
13export default 'page2-a';
14

先执行 pnpm install，再执行 npm run build 之后：

1// dist/page1.95962465.bundle.js
2// dist/page2.18656d4d.bundle.js
3// dist/page1-a.d.ts
4// dist/page2-a.d.ts
5// dist/page1.d.ts
6// dist/page2.d.ts
7

这里每个 ts 文件都生成了一个 d.ts 文件，这个文件是类型定义文件，用来定义模块的类型。

如果一个文件需要多个 loader 解析，比如 less 文件，那么需要配置多个 loader，且 loader 的执行顺序是从右到左，也就是数组的最后一个 loader 先执行：

1{
2  test: /\.less$/,
3  use: ['style-loader', 'css-loader', 'less-loader'],
4}
5

这里我们配置了三个 loader，分别是 style-loader、css-loader 和 less-loader：

• less-loader 用来将 Less 语法转换为普通 CSS，例如：@color: red; → color: red;
• css-loader 处理转换后的 css 文件，解析 @import 语句，处理 url(./image.png) 等资源路径，若启用 modules，会生成类名哈希（如 .class_1234）
• style-loader 将最终 CSS 代码通过 JavaScript 动态插入 DOM：document.head.innerHTML += '<style>body { color: red; }</style>';

plugin 的配置

📖 官方文档：Webpack Plugins | Plugin API

Webpack 中的 plugin（插件）是用于扩展 Webpack 功能的模块，通过在构建流程中注入钩子来实现资源处理、优化等自定义任务。与 loader（专注于文件转换）不同，plugin 作用于 Webpack 的整个编译生命周期，能够执行更广泛的任务，如打包优化、资源管理、环境变量注入等。

webpack-simple-demo 项目中，我们使用了 HtmlWebpackPlugin 来举例说明 plugin 的配置。HtmlWebpackPlugin 是 Webpack 生态中的核心插件，主要用于自动生成 HTML 文件并管理打包资源的注入。

先配置 package.json：

1"devDependencies": {
2  "html-webpack-plugin": "^5.5.3",
3}
4

然后配置 webpack.config.js：

1const HtmlWebpackPlugin = require('html-webpack-plugin');
2
3  plugins: [
4    // 为 page1 生成 HTML
5    new HtmlWebpackPlugin({
6      template: './src/templates/page1.html', // 模板文件
7      filename: 'page1.html', // 输出文件名
8      chunks: ['page1'], // 需要注入到当前HTML的JS模块
9      title: 'Page1', // 标题
10      meta: { // 元数据
11        viewport: 'width=device-width, initial-scale=1',
12        description: 'Page1 页面'
13      },
14      inject: 'body',              // 资源注入位置
15      minify: {                    // 生产环境压缩
16        removeComments: true,
17        collapseWhitespace: true
18      }
19    }),
20    // 为 page2 生成 HTML
21    new HtmlWebpackPlugin({
22      template: './src/templates/page2.html',
23      filename: 'page2.html',
24      chunks: ['page2'],
25      title: 'Page2',
26      meta: {
27        viewport: 'width=device-width, initial-scale=1',
28        description: 'Page2 页面'
29      },
30      inject: 'body',
31      minify: {
32        removeComments: true,
33        collapseWhitespace: true
34      }
35    })
36  ],
37

然后在 src 里 templates 里建立两个 html 文件：

1// src/templates/page1.html
2<!DOCTYPE html>
3<html lang="zh-CN">
4  <head>
5    <meta charset="UTF-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title><%= htmlWebpackPlugin.options.title %></title>
8    <meta
9      name="description"
10      content="<%= htmlWebpackPlugin.options.meta.description %>"
11    />
12  </head>
13  <body>
14    <div class="container">
15      <h1>Page1</h1>
16
17      <div class="nav">
18        <a href="page1.html">Page1</a>
19        <a href="page2.html">Page2</a>
20      </div>
21    </div>
22  </body>
23</html>
24
25// src/templates/page2.html
26<!DOCTYPE html>
27<html lang="zh-CN">
28  <head>
29    <meta charset="UTF-8" />
30    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
31    <title><%= htmlWebpackPlugin.options.title %></title>
32    <meta
33      name="description"
34      content="<%= htmlWebpackPlugin.options.meta.description %>"
35    />
36  </head>
37  <body>
38    <div class="container">
39      <h1>Page2</h1>
40
41      <div class="nav">
42        <a href="page1.html">Page1</a>
43        <a href="page2.html">Page2</a>
44      </div>
45    </div>
46  </body>
47</html>
48

先执行 pnpm install，再执行 npm run build 之后：

1// dist/page1.html 里面自动注入<script defer src="page1.c4e91d29.bundle.js"></script>
2// dist/page2.html 里面自动注入<script defer src="page2.c4e91cb1.bundle.js"></script>
3

这里生成了两个 HTML 文件，分别是 page1.html 和 page2.html。可以拖动浏览器查看效果。

开发服务器

📖 官方文档：Webpack Dev Server | Dev Server API

Webpack 的开发服务器是用于在开发过程中提供实时预览和调试功能的工具。它允许开发者在浏览器中实时查看代码变化，并提供自动刷新和热更新功能，从而加快开发速度和提升开发体验。

webpack-simple-demo 项目中，我们使用了 webpack-dev-server 来举例说明开发服务器的配置。

先配置 package.json：

1"scripts": {
2  "serve": "webpack serve --config webpack.config.js"
3},
4"devDependencies": {
5  "webpack-dev-server": "^4.15.1",
6}
7

然后配置 webpack.config.js：

1module.exports = {
2  // 开发服务器配置
3  devServer: {
4    static: {
5      directory: path.join(__dirname, 'dist'),
6    },
7    compress: true,
8    port: 3000,
9    hot: true,
10    open: true,
11    historyApiFallback: {
12      rewrites: [
13        { from: '/', to: '/page1.html' },
14        { from: /^\/page1/, to: '/page1.html' },
15        { from: /^\/page2/, to: '/page2.html' },
16      ],
17    },
18  },
19};
20

然后执行 npm run serve 之后，浏览器会自动打开 http://localhost:3000 就能看到页面了。

配置区别

一般开发环境配置和生产环境配置的配置是不同的，比如开发环境配置会包含开发服务器配置，而生产环境配置会包含代码压缩配置。

webpack-simple-demo 项目中，我们使用了 webpack-merge 来举例说明配置合并的配置。

先配置 package.json：

1"devDependencies": {
2  "webpack-merge": "^5.8.0",
3}
4

然后配置 webpack.config.base.js：

1const path = require('path');
2const HtmlWebpackPlugin = require('html-webpack-plugin');
3
4module.exports = {
5  // 入口文件
6  entry: {
7    page1: './src/page1.ts',
8    page2: './src/page2.ts',
9  },
10
11  // 模块解析
12  resolve: {
13    extensions: ['.ts', '.js'],
14  },
15
16  // 模块规则
17  module: {
18    rules: [
19      {
20        test: /\.ts$/,
21        use: 'ts-loader',
22        exclude: /node_modules/,
23      },
24    ],
25  },
26
27  // 插件配置
28  plugins: [
29    // 为 page1 生成 HTML
30    new HtmlWebpackPlugin({
31      template: './src/templates/page1.html',
32      filename: 'page1.html',
33      chunks: ['page1'],
34      title: 'Page1 - TypeScript Webpack Demo',
35      meta: {
36        viewport: 'width=device-width, initial-scale=1',
37        description: 'Page1 页面 - TypeScript Webpack 示例',
38      },
39    }),
40    // 为 page2 生成 HTML
41    new HtmlWebpackPlugin({
42      template: './src/templates/page2.html',
43      filename: 'page2.html',
44      chunks: ['page2'],
45      title: 'Page2 - TypeScript Webpack Demo',
46      meta: {
47        viewport: 'width=device-width, initial-scale=1',
48        description: 'Page2 页面 - TypeScript Webpack 示例',
49      },
50    }),
51  ],
52};
53

然后配置 webpack.config.dev.js：

1const { merge } = require('webpack-merge');
2const baseConfig = require('./webpack.config.base');
3
4// @ts-ignore
5module.exports = merge(baseConfig, {
6  // 模式
7  mode: 'development',
8
9  // 开发工具
10  devtool: 'eval-cheap-module-source-map',
11
12  // 输出配置（开发环境）
13  output: {
14    filename: '[name].bundle.js',
15    path: require('path').resolve(__dirname, 'dist'),
16    clean: true,
17  },
18
19  // 开发服务器配置
20  devServer: {
21    static: {
22      directory: require('path').join(__dirname, 'dist'),
23    },
24    compress: true,
25    port: 3000,
26    hot: true,
27    open: true,
28    historyApiFallback: {
29      rewrites: [
30        { from: '/', to: '/page1.html' },
31        { from: /^\/page1/, to: '/page1.html' },
32        { from: /^\/page2/, to: '/page2.html' },
33      ],
34    },
35  },
36
37  // 开发环境优化
38  optimization: {
39    splitChunks: {
40      chunks: 'all',
41      cacheGroups: {
42        vendor: {
43          test: /[\\/]node_modules[\\/]/,
44          name: 'vendor',
45          chunks: 'all',
46          priority: 10,
47        },
48        common: {
49          name: 'common',
50          minChunks: 2,
51          chunks: 'all',
52          priority: 5,
53          reuseExistingChunk: true,
54        },
55      },
56    },
57  },
58  plugins: [],
59});
60

然后配置 webpack.config.prod.js：

1const { merge } = require('webpack-merge');
2const TerserPlugin = require('terser-webpack-plugin');
3const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
4const baseConfig = require('./webpack.config.base');
5// @ts-ignore
6module.exports = merge(baseConfig, {
7  // 模式
8  mode: 'production',
9
10  // 开发工具
11  devtool: 'source-map',
12
13  // 输出配置（生产环境）
14  output: {
15    filename: '[name].[contenthash:8].bundle.js',
16    path: require('path').resolve(__dirname, 'dist'),
17    clean: true,
18  },
19
20  // 生产环境优化
21  optimization: {
22    minimize: true,
23    minimizer: [
24      new TerserPlugin({
25        terserOptions: {
26          compress: {
27            drop_console: true,
28            drop_debugger: true,
29            pure_funcs: ['console.log', 'console.info', 'console.debug'],
30          },
31          mangle: {
32            safari10: true,
33          },
34        },
35        extractComments: false,
36      }),
37      new CssMinimizerPlugin(),
38    ],
39    splitChunks: {
40      chunks: 'all',
41      minSize: 20000,
42      maxSize: 244000,
43      cacheGroups: {
44        vendor: {
45          test: /[\\/]node_modules[\\/]/,
46          name: 'vendor',
47          chunks: 'all',
48          priority: 10,
49          enforce: true,
50        },
51        common: {
52          name: 'common',
53          minChunks: 2,
54          chunks: 'all',
55          priority: 5,
56          reuseExistingChunk: true,
57          enforce: true,
58        },
59      },
60    },
61  },
62
63  // 性能配置
64  performance: {
65    hints: 'warning',
66    maxEntrypointSize: 512000,
67    maxAssetSize: 512000,
68  },
69});
70