Webpack:F:\nochinese_path\React_code\webpack

m0_741412242026-01-14 11:29

mode: 'production' 与 TerserPlugin 的区别

1. mode: 'production'（模式设置）

设置 mode: 'production' 时，webpack 会自动启用多项生产优化，包括：

代码压缩（默认使用 TerserPlugin）

Tree Shaking

作用域提升（Scope Hoisting）

移除未使用的代码

优化模块 ID

优化 chunk ID

启用 optimization.minimize: true

2. TerserPlugin（压缩插件）

TerserPlugin 是用于压缩和混淆 JavaScript 的插件：

压缩代码（移除空格、换行等）

混淆变量名

移除注释和死代码

可自定义压缩选项

关键区别

当 mode: 'production' 时：

webpack 默认启用 TerserPlugin 进行压缩

使用默认的压缩配置

手动配置 TerserPlugin 时：

可以自定义压缩选项（如保留注释、自定义压缩级别等）

可以替换为其他压缩工具（如 esbuild）

可以禁用压缩（设置 minimize: false）

javascript 复制代码

  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()]
  }

由于已设置 mode: 'production'，这里的 TerserPlugin 配置是冗余的。webpack 会自动使用 TerserPlugin。

如果需要自定义压缩选项，可以这样配置：

javascript 复制代码

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: true, // 移除 console
        },
        format: {
          comments: false, // 移除注释
        },
      },
    }),
  ],
}

总结：mode: 'production' 是全局优化设置，会自动启用 TerserPlugin；手动配置 TerserPlugin 主要用于自定义压缩行为。

MiniCssExtractPlugin

从JS中提取CSS，并在光盘文件夹中创建一个独立的文件,最后这个css.bundle.js会被通过htmlWebpackPlugin加在index.html