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拆分不同环境的配置：
- 创建通用配置（
webpack.common.js）。 - 开发配置（
webpack.dev.js）合并通用配置并添加开发插件（如HotModuleReplacementPlugin）。 - 生产配置（
webpack.prod.js）合并通用配置并添加优化插件（如MiniCssExtractPlugin）。
通过--config指定配置文件：
webpack --config webpack.prod.js
"build": "webpack --mode=production",
"dev": "webpack serve --mode=development"
