Webpack区分开发与生产环境的核心是编译时注入变量和配置按环境拆分：通过DefinePlugin静态替换process.env.NODE_ENV等变量，配合--env参数驱动配置函数、webpack-merge拆分合并配置，并用cross-env确保Node运行时环境变量生效。
在 Webpack 中区分开发与生产环境，核心是两件事：编译时注入变量 + 配置按环境拆分。不是靠运行时读取，而是构建阶段就把值“写死”进代码里，既安全又高效。
用 DefinePlugin 注入环境变量
Webpack 的 DefinePlugin 在打包时做静态替换，比如把 process.env.NODE_ENV 直接替换成字符串字面量。必须用 JSON.stringify() 包裹，否则会报 ReferenceError。
- 开发配置（webpack.dev.js）中写：
'process.env.NODE_ENV': JSON.stringify('development'),<br>'API_BASE_URL': JSON.stringify('http://localhost:8080')
- 生产配置（webpack.prod.js）中写：
'process.env.NODE_ENV': JSON.stringify('production'),<br>'API_BASE_URL': JSON.stringify('https://api.example.com')
立即学习“Java免费学习笔记（深入）”；
这样你在 JS 里写 if (process.env.NODE_ENV === 'development')，生产包里整段会被 Terser 删除——没有运行时开销，也不暴露调试逻辑。
通过 --env 参数驱动配置函数
把 module.exports 改成函数，就能接收命令行传来的 env 对象：
module.exports = (env) => {<br> const isProduction = env.production;<br> return {<br> mode: isProduction ? 'production' : 'development',<br> // 其他配置...<br> }<br>};
然后在 package.json 里定义脚本：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
"dev": "webpack serve --env development",<br>"build": "webpack --env production"
执行时，env.production 就是 true，可直接用于判断和配置分支。
拆分配置 + webpack-merge 合并
避免重复写三份完整配置，推荐“公共 + 差异”结构：
-
webpack.common.js：放入口、输出路径、loader 基础规则、别名等所有环境共用项 -
webpack.dev.js：只加 devServer、source map、热更新等开发专属配置 -
webpack.prod.js：只加压缩、哈希、Tree Shaking 等生产优化项
再用 webpack-merge 把它们合起来：
const { merge } = require('webpack-merge');<br>const common = require('./webpack.common.js');<br>const prod = require('./webpack.prod.js');<br>module.exports = merge(common, prod);
配合 cross-env 设置 process.env
有些插件或 loader（比如 Babel）依赖 process.env.NODE_ENV，而 DefinePlugin 不影响 Node 运行时。这时可以用 cross-env：
"dev": "cross-env NODE_ENV=development webpack serve",<br>"build": "cross-env NODE_ENV=production webpack"
它能跨平台设置环境变量，确保构建过程和工具链都能正确识别当前环境。
