webpack开发模式与生产模式（webpack --mode=development/production“, ）

webpack开发模式与生产模式的区别

webpack的development（开发模式）和production（生产模式）是两种常见的构建环境配置，主要区别体现在构建速度、代码优化和调试支持等方面。

开发模式 (development)

• 目标：注重开发效率和调试体验。
• 特性：
  • 不压缩代码，保留源代码格式和注释。
  • 启用eval或source-map生成完整的source map，便于调试。
  • 保留process.env.NODE_ENV为'development'，供库和框架识别环境。
  • 启用HMR（模块热替换）和更快的构建速度。

生产模式 (production)

• 目标：优化代码体积和性能。
• 特性：
  • 启用代码压缩（如TerserPlugin）、Tree Shaking和Scope Hoisting。
  • 生成轻量级source map或不生成（根据配置）。
  • 设置process.env.NODE_ENV为'production'，触发库的优化逻辑（如React移除PropTypes）。
  • 拆分代码（Code Splitting）和缓存优化（文件名哈希）。

如何配置模式

在webpack配置文件中通过mode字段直接指定：

// webpack.config.js
module.exports = {mode: 'development', // 或 'production'// 其他配置...
};

或通过命令行参数传递：

webpack --mode=production

注意事项

• 环境变量：可通过webpack.DefinePlugin自定义全局变量，例如：

  new webpack.DefinePlugin({'process.env.API_URL': JSON.stringify('https://dev.example.com'),
  });
  

• 覆盖默认优化：生产模式下webpack会自动启用优化插件，如需调整，可通过optimization字段覆盖：

  optimization: {minimize: false, // 禁用压缩（不推荐）splitChunks: { chunks: 'all' }, // 自定义代码拆分
  }
  

• 开发工具：开发模式下推荐使用webpack-dev-server或webpack-hot-middleware实现实时重载。

扩展：区分环境的配置

可使用webpack-merge拆分不同环境的配置：

1. 创建通用配置（webpack.common.js）。
2. 开发配置（webpack.dev.js）合并通用配置并添加开发插件（如HotModuleReplacementPlugin）。
3. 生产配置（webpack.prod.js）合并通用配置并添加优化插件（如MiniCssExtractPlugin）。

通过--config指定配置文件：

webpack --config webpack.prod.js

"build": "webpack --mode=production",
"dev": "webpack serve --mode=development"