请说明在 Webpack 配置中如何区分并切换开发环境与生产环境，包括主要配置差异和实现方式。

回答思路

1. 【回答框架 1】Webpack 通过 mode 参数区分开发与生产环境，开发模式默认开启 source map 和热更新，生产模式启用压缩和优化。
2. 【回答框架 2】常用方式是利用环境变量（如 NODE_ENV）配合配置文件（webpack.dev.js、webpack.prod.js）进行拆分，并通过 webpack-merge 合并公共配置。
3. 【回答框架 3】开发环境关注构建速度和调试体验，使用 devServer 和 cheap-module-source-map；生产环境关注性能和体积，使用 TerserPlugin 压缩和 contenthash 缓存。
4. 【回答框架 4】通过 DefinePlugin 注入全局变量，在业务代码中区分环境并做相应处理，如关闭调试日志。
5. 【回答框架 5】可将公共配置单独提取，使用环境变量作为入口参数，实现多环境配置的灵活切换。
6. 【关键点 1】mode 参数决定 Webpack 的默认优化行为。
7. 【关键点 2】环境变量配合 webpack-merge 拆分配置是常见实践。
8. 【关键点 3】DefinePlugin 注入环境变量，便于业务代码区分。
9. 【关键点 4】生产环境需启用代码压缩和内容哈希。
10. 【关键点 5】使用 cross-env 保证环境变量在跨平台下的正确设置。
11. 【易错点 1】仅在配置中设置 NODE_ENV 不足以保证生产构建，需结合 mode 和插件。
12. 【易错点 2】单独压缩不代表全部优化，需注意 tree shaking 和缓存策略。
13. 【易错点 3】误将开发环境的 source map 用于生产，会暴露源码。