Webpack中mode详解Webpack 中的 mode 是一个核心配置选项，用于指定构建模式（开发模式或生产模式），

Webpack 中的 mode 是一个核心配置选项，用于指定构建模式（开发模式或生产模式），它会自动启用 Webpack 内置的优化策略。以下是详细解释：

mode 允许你根据当前环境（开发或生产）启用不同的 Webpack 默认优化行为，包括：

development（开发模式）
- 特点：
  - 不压缩代码，保留 Source Map。
  - 优化构建速度，适合本地开发调试。
  - 启用 NamedChunksPlugin 和 NamedModulesPlugin，保留模块名称便于调试。
- 示例：
```
// webpack.config.js
module.exports = {
  mode: 'development',
};
```
production（生产模式）
- 特点：
  - 启用代码压缩、Tree Shaking、作用域提升。
  - 移除未使用的代码（Dead Code Elimination）。
  - 禁用开发工具（如 Source Map 默认关闭）。
  - 自动设置 process.env.NODE_ENV 为 'production'。
- 示例：
```
module.exports = {
  mode: 'production',
};
```
none（无模式）
- 特点：
  - 禁用所有默认优化行为。
  - 完全由开发者手动配置所有插件和优化项。

在 webpack.config.js 中直接指定：

module.exports = {
  mode: 'production', // 或 'development' / 'none'
};

通过 --mode 标志传递：

webpack --mode=production

development 模式：
- 默认启用 devtool: 'eval'（快速 Source Map）。
- 设置 process.env.NODE_ENV 为 'development'。
- 禁用性能优化（如代码压缩）。
production 模式：
- 默认启用 devtool: false（无 Source Map）。
- 设置 process.env.NODE_ENV 为 'production'。
- 启用 TerserPlugin 压缩 JS 和 CSS。
- 启用 ModuleConcatenationPlugin（作用域提升）。

// webpack.config.js
module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
};

若默认优化不满足需求，可在 mode 基础上手动配置：

module.exports = {
  mode: 'production',
  optimization: {
    minimize: false, // 覆盖默认的压缩行为
  },
};

通过 mode 自动注入 process.env.NODE_ENV，代码中可直接使用：

if (process.env.NODE_ENV === 'development') {
  console.log('开发模式');
}

Webpack中mode详解