Webpack通过mode配置控制构建行为，并用DefinePlugin静态注入环境变量，实现开发与生产环境的安全高效区分；支持--env参数驱动多环境配置，推荐基础配置+环境覆盖结构提升可维护性。
Webpack 区分开发与生产环境，核心不是运行时读取，而是在构建阶段就把值“写死”进代码里——靠 mode 配置 控制默认优化行为，再用 DefinePlugin 静态注入变量，两者配合实现安全、高效、无运行时开销的环境区分。
用 mode 控制基础构建行为
Webpack 内置 development 和 production 两种模式，直接决定压缩、SourceMap、Tree Shaking 等策略：
- 开发环境设
mode: 'development'：保留可读代码、启用快速 SourceMap（如eval-cheap-source-map），不压缩，方便调试 - 生产环境设
mode: 'production'：自动启用 Terser 压缩、Scope Hoisting、SplitChunks 分包，并移除console和debugger - 可通过命令行传参：
webpack --mode=development或webpack --mode=production
用 DefinePlugin 注入编译时环境变量
业务代码常需切换 API 地址、日志开关等，不能靠运行时判断，必须在打包时静态替换：
- 在配置中使用
new webpack.DefinePlugin({})，例如： - 开发配置写：
'process.env.NODE_ENV': JSON.stringify('development'), 'API_BASE_URL': JSON.stringify('http://localhost:8080') - 生产配置写：
'process.env.NODE_ENV': JSON.stringify('production'), 'API_BASE_URL': JSON.stringify('https://api.example.com') -
注意：字符串值必须用
JSON.stringify()包裹，否则会报ReferenceError - JS 中可直接写
if (process.env.NODE_ENV === 'development')，生产构建后整段会被 Terser 删除，不会打入最终包
通过配置函数 + --env 参数驱动多环境
把 webpack.config.js 导出为函数，就能接收命令行参数，复用大部分配置，按需启用插件：
- 配置导出改为：
module.exports = (env, argv) => { const isProduction = env.production; return { mode: isProduction ? 'production' : 'development', /* 其他配置 */ } } -
package.json脚本示例："dev": "webpack serve --env development"，"build": "webpack --env production" - 执行
npx webpack --env production后，env对象中会有production: true，可用于条件加载插件（如开发加 HMR，生产加 MiniCssExtractPlugin）
推荐结构：基础配置 + 环境覆盖
避免重复，提升可维护性：
- 创建
webpack.config.base.js：存放入口、输出路径、loader 规则等通用配置 - 创建
webpack.config.dev.js和webpack.config.prod.js：分别引入 base 配置，再用webpack-merge合并各自特有项（如 devServer、压缩插件） - 安装合并工具：
npm install -D webpack-merge - 在 dev 配置中：
const { merge } = require('webpack-merge'); module.exports = merge(baseConfig, { devServer: { port: 8080 } })
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
