在 Webpack 中，mode（模式）参数主要有 3 种 取值。这个参数告诉 Webpack 使用相应模式的内置优化策略。

以下是具体的取值及其作用：

1. development（开发模式）

• 核心目标：注重构建速度和完美的开发/调试体验。
• 内置行为：
  • 开启针对开发环境的各种优化（如保留有意义的模块和 Chunk 名称）。
  • 将 process.env.NODE_ENV 的值设置为 'development'。
  • 自动开启方便调试的插件（例如提供模块热替换 HMR 相关的支持）。
  • 不压缩代码，生成的代码可读性强，方便打断点和排查问题。

2. production（生产模式 - 默认值）

• 核心目标：注重打包后的代码体积和运行性能，用于上线部署。
• 内置行为：
  • 将 process.env.NODE_ENV 的值设置为 'production'。
  • 自动开启代码压缩（使用 TerserPlugin 压缩 JavaScript）。
  • 自动开启 Tree Shaking（去除未引用的死代码/Dead Code）。
  • 自动开启 Scope Hoisting（作用域提升，减小体积并提升运行速度）。
  • 做代码混淆，并隐去敏感信息。

注意：如果在配置中未指定 mode，Webpack 5 会默认使用 production，并在控制台输出一条警告。

3. none（无预设模式）

• 核心目标：不开启任何默认的优化项。
• 内置行为：
  • 退回最原始的打包状态。
  • 不会自动将 process.env.NODE_ENV 设置为任何值。
  • 完全由开发者自定义所有的优化插件和配置，适合想要彻底掌控打包过程的高级场景。

如何设置 mode？

你可以通过以下两种最常见的方式来配置 mode：

方式一：在 webpack.config.js 配置文件中设置

module.exports = {
  mode: 'development', // 或 'production', 'none'
  entry: './src/index.js',
  // ... 其他配置
};

方式二：在 CLI 命令中通过参数传递（推荐用于 npm scripts）

// package.json
{
  "scripts": {
    "dev": "webpack --mode=development",
    "build": "webpack --mode=production"
  }
}

总结对比