1
初始化参数
2
    ↓
3
创建 Compiler 对象
4
    ↓
5
注册所有插件（plugins）
6
    ↓
7
确定入口（entry）
8
    ↓
9
从入口开始构建模块图（Module Graph）
10
    ↓
11
Loader 转换每个模块
12
    ↓
13
递归处理依赖模块
14
    ↓
15
生成 Chunk（代码块）
16
    ↓
17
输出 Bundle 到文件系统

1
// webpack.config.js 核心配置
2
module.exports = {
3
  entry: './src/index.js',       // 入口
4
  output: {                       // 输出
5
    path: path.resolve(__dirname, 'dist'),
6
    filename: '[name].[contenthash].js',
7
  },
8
  module: {
9
    rules: [                      // Loader 规则
10
      { test: /\.js$/, use: 'babel-loader' },
11
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
12
    ]
13
  },
14
  plugins: [                      // 插件
15
    new HtmlWebpackPlugin(),
16
    new MiniCssExtractPlugin(),
17
  ],
18
  optimization: {                 // 优化
19
    splitChunks: { chunks: 'all' },
20
    minimize: true,
21
  },
22
};

1
// Loader 本质：一个函数
2
function myLoader(source) {
3
  // source 是文件内容字符串
4
  return source.replace(/console\.log\(.*?\);?/g, '');
5
}
6
module.exports = myLoader;
7

8
// Plugin 本质：一个类，监听 Compiler hooks
9
class MyPlugin {
10
  apply(compiler) {
11
    // 监听 emit 事件（输出文件前）
12
    compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
13
      // 修改 compilation.assets
14
      callback();
15
    });
16

17
    // 监听 done 事件（构建完成）
18
    compiler.hooks.done.tap('MyPlugin', (stats) => {
19
      console.log('Build complete!');
20
    });
21
  }
22
}

1
// 常见 Loader
2
// babel-loader    -> ES6+ 转 ES5
3
// css-loader      -> 解析 CSS 中的 @import 和 url()
4
// style-loader    -> 将 CSS 插入到 <style> 标签
5
// sass-loader     -> 编译 Sass/SCSS
6
// postcss-loader  -> 自动添加浏览器前缀（autoprefixer）
7
// file-loader     -> 处理图片/字体文件
8
// url-loader      -> 小文件转 base64
9
// ts-loader       -> 编译 TypeScript
10
// vue-loader      -> 解析 Vue SFC
11

12
// 执行顺序：从右到左，从下到上
13
module: {
14
  rules: [{
15
    test: /\.scss$/,
16
    use: [
17
      'style-loader',    // 4. 插入 DOM
18
      'css-loader',      // 3. 解析 CSS
19
      'postcss-loader',  // 2. 添加前缀
20
      'sass-loader',     // 1. 编译 Sass（先执行）
21
    ]
22
  }]
23
}

1
const HtmlWebpackPlugin = require('html-webpack-plugin');
2
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
4
const TerserPlugin = require('terser-webpack-plugin');
5
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
6
const DefinePlugin = require('webpack').DefinePlugin;
7
const CopyWebpackPlugin = require('copy-webpack-plugin');
8

9
plugins: [
10
  // 自动生成 HTML 并注入 bundle
11
  new HtmlWebpackPlugin({ template: './src/index.html' }),
12

13
  // 提取 CSS 为单独文件（生产环境）
14
  new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash].css' }),
15

16
  // 清空 dist 目录
17
  new CleanWebpackPlugin(),
18

19
  // 定义全局变量（环境变量注入）
20
  new DefinePlugin({
21
    'process.env.API_URL': JSON.stringify(process.env.API_URL)
22
  }),
23

24
  // 复制静态文件
25
  new CopyWebpackPlugin({ patterns: [{ from: 'public', to: '' }] }),
26
],
27

28
optimization: {
29
  minimizer: [
30
    new TerserPlugin({ parallel: true }),       // 压缩 JS
31
    new CssMinimizerPlugin(),                    // 压缩 CSS
32
  ]
33
}

1
// ESM：静态分析（编译时确定）
2
import { foo } from './module'; // 结构固定
3

4
// CommonJS：动态加载（运行时确定）
5
const module = require(condition ? './a' : './b'); // 无法静态分析

1
// 1. 副作用代码
2
// package.json 中声明
3
{ "sideEffects": false } // 允许 Tree Shaking
4
{ "sideEffects": ["*.css"] } // CSS 文件有副作用，保留
5

6
// 2. Babel 将 ESM 转换为 CJS（破坏静态分析）
7
// babel.config.js
8
{
9
  "presets": [["@babel/preset-env", { "modules": false }]] // 保留 ESM
10
}
11

12
// 3. 导入整个对象
13
import * as utils from './utils'; // 无法 Tree Shaking
14

15
// 4. 类方法
16
class MyClass {
17
  usedMethod() {}
18
  unusedMethod() {} // 类方法无法被 Tree Shaking
19
}

1
// 1. 多入口（entry）
2
entry: {
3
  app: './src/app.js',
4
  admin: './src/admin.js',
5
}
6

7
// 2. 动态导入（懒加载）
8
const LazyComponent = () => import('./components/Lazy.vue');
9
// React
10
const LazyComponent = React.lazy(() => import('./Lazy'));
11

12
// 3. splitChunks（提取公共代码）
13
optimization: {
14
  splitChunks: {
15
    chunks: 'all', // async | initial | all
16
    cacheGroups: {
17
      // 提取第三方库
18
      vendor: {
19
        test: /[\\/]node_modules[\\/]/,
20
        name: 'vendors',
21
        chunks: 'all',
22
        priority: 10,
23
      },
24
      // 提取公共模块
25
      common: {
26
        minChunks: 2,
27
        name: 'common',
28
        chunks: 'all',
29
        priority: 5,
30
        reuseExistingChunk: true,
31
      },
32
    },
33
  },
34
}
35

36
// 4. runtimeChunk（提取 Webpack 运行时代码）
37
optimization: {
38
  runtimeChunk: 'single', // 单独提取 runtime
39
}

1
// contenthash：根据文件内容生成 hash
2
// 只有文件内容变化，hash 才变化，利用浏览器缓存
3

4
output: {
5
  filename: 'js/[name].[contenthash:8].js',
6
  chunkFilename: 'js/[name].[contenthash:8].chunk.js',
7
},
8

9
// moduleIds: 'deterministic'
10
// 确保模块 ID 稳定，避免 hash 抖动
11
optimization: {
12
  moduleIds: 'deterministic',
13
  chunkIds: 'deterministic',
14
}

1
HMR 工作流程：
2

3
1. Webpack 监听文件变化，重新编译修改的模块
4
2. Webpack Dev Server 通过 WebSocket 通知浏览器
5
3. 浏览器 HMR Runtime 接收更新信息
6
4. HMR Runtime 下载新的模块代码（JSONP）
7
5. 执行模块的 accept handler，替换旧模块
8
6. 如果没有 accept handler，则冒泡到父模块
9
7. 如果冒泡到入口还未处理，则整页刷新

1
// HMR API
2
if (module.hot) {
3
  module.hot.accept('./component.js', () => {
4
    // 组件更新时执行
5
    renderComponent();
6
  });
7

8
  module.hot.dispose(() => {
9
    // 模块卸载时清理
10
    cleanup();
11
  });
12
}
13

14
// Vue 中（vue-loader 自动处理）
15
// React 中（react-hot-loader / Fast Refresh）

1
浏览器请求 index.html
2
        ↓
3
Vite Dev Server 拦截请求
4
        ↓
5
按需编译请求的模块（不打包）
6
        ↓
7
以 ESM 格式返回给浏览器
8
        ↓
9
浏览器通过 <script type="module"> 加载
10
        ↓
11
遇到 import 再向 Vite 请求（按需加载）

1
// 1. 缩小 Loader 作用范围
2
{
3
  test: /\.js$/,
4
  use: 'babel-loader',
5
  exclude: /node_modules/, // 排除 node_modules
6
  // 或 include: path.resolve(__dirname, 'src')
7
}
8

9
// 2. 缓存
10
{
11
  test: /\.js$/,
12
  use: [{
13
    loader: 'babel-loader',
14
    options: { cacheDirectory: true } // 缓存编译结果
15
  }]
16
}
17
// 或使用 filesystem cache（Webpack 5）
18
cache: {
19
  type: 'filesystem',
20
  buildDependencies: { config: [__filename] },
21
}
22

23
// 3. 多线程构建
24
const ThreadLoader = require('thread-loader');
25
{
26
  test: /\.js$/,
27
  use: [ThreadLoader, 'babel-loader'] // 多进程
28
}
29

30
// 4. DLL 预编译（Webpack 4，Webpack 5 用 cache 代替）
31
// 将第三方库提前编译，不随业务代码重新打包
32

33
// 5. resolve 优化
34
resolve: {
35
  extensions: ['.js', '.jsx', '.ts', '.tsx'], // 减少后缀尝试
36
  alias: { '@': path.resolve(__dirname, 'src') }, // 路径别名
37
  modules: [path.resolve(__dirname, 'node_modules')], // 指定查找目录
38
}
39

40
// 6. 使用更快的工具
41
// terser-webpack-plugin（parallel: true）
42
// esbuild-loader（替代 babel-loader + terser）

1
// 1. Tree Shaking（已讲）
2
// 确保使用 ESM，配置 sideEffects
3

4
// 2. 代码分割（已讲）
5
// splitChunks + 动态导入
6

7
// 3. 压缩
8
optimization: {
9
  minimize: true,
10
  minimizer: [
11
    new TerserPlugin({
12
      parallel: true,
13
      terserOptions: {
14
        compress: { drop_console: true, drop_debugger: true }
15
      }
16
    }),
17
    new CssMinimizerPlugin(),
18
  ]
19
},
20

21
// 4. Gzip 压缩（配合 Nginx）
22
const CompressionPlugin = require('compression-webpack-plugin');
23
new CompressionPlugin({
24
  algorithm: 'gzip',
25
  test: /\.js$|\.css$|\.html$/,
26
  threshold: 10240, // 只压缩 > 10KB 的文件
27
})
28

29
// 5. 图片优化
30
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
31

32
// 6. 分析包体积
33
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
34
new BundleAnalyzerPlugin() // 可视化分析
35

36
// 7. 按需引入组件库
37
// babel-plugin-import（Ant Design / Element UI）
38
{
39
  "plugins": [["import", { "libraryName": "antd", "style": "css" }]]
40
}

1
源代码 (JS/JSX/TS)
2
    ↓
3
解析 (Parse) → AST（抽象语法树）
4
    ↓
5
转换 (Transform) → 新 AST（插件处理）
6
    ↓
7
生成 (Generate) → 目标代码