环境区分
约 659 字大约 2 分钟
2026-02-11
“开发能跑”不等于“生产可用”。
环境区分的核心不是多写几份配置，而是让构建行为和目标一致：
- 开发环境追求调试效率。
- 生产环境追求稳定性、体积和缓存命中。
mode 解决了什么问题
mode 是 Webpack 的环境总开关，会影响默认优化策略。
| mode | 默认行为 | 适合场景 |
|---|---|---|
development | 更快构建、更友好调试 | 本地开发 |
production | 自动启用压缩与优化 | 线上发布 |
none | 不启用默认环境策略 | 自定义实验场景 |
mode 对构建行为的影响
开发环境配置思路
在开发环境里，重点是“改代码 -> 立刻看到反馈”。
因此常见选择是：
devtool用快速映射。devServer打开 HMR 和代理。- 不启用重型压缩。
// webpack.dev.cjs
module.exports = {
mode: 'development',
devtool: 'eval-cheap-module-source-map',
devServer: {
host: '0.0.0.0',
port: 9527,
open: true,
hot: true,
compress: true,
// 让 public 目录下资源可直接访问
static: ['public'],
// 解决 SPA history 刷新 404
historyApiFallback: true,
// 统一本地接口代理
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: { '^/api': '' },
},
},
},
};生产环境配置思路
生产环境的目标是“更小、更稳、更易缓存”。
因此常见策略是：
- 关闭或收敛 Source Map。
- 开启压缩、拆包、长期缓存策略。
- 严格控制环境变量注入。
// webpack.prod.cjs
const webpack = require('webpack');
module.exports = {
mode: 'production',
devtool: 'hidden-source-map',
plugins: [
// 只暴露必要的环境变量到前端
new webpack.DefinePlugin({
__APP_ENV__: JSON.stringify('production'),
__ENABLE_MOCK__: JSON.stringify(false),
}),
],
};HMR 为什么只在开发用
HMR 会注入额外运行时代码用于热替换，这对开发是高效率，但对生产没有收益且增加复杂度。
// src/main.js
import { render } from './render';
render();
if (module.hot) {
module.hot.accept('./render', () => {
const { render: nextRender } = require('./render');
nextRender();
});
}使用注意事项
建议
- 环境差异只放在对应配置文件里，不要混入 common。
- 用脚本明确执行哪个配置，避免团队运行不一致。
- 环境变量白名单注入，不要把
.env全量塞进前端。
常见错误
historyApiFallback漏配导致刷新路由 404。- 生产环境沿用开发
devtool，发布包体积异常。 - 代理配置写错层级，导致请求未被转发。
最佳实践
- 用“目标导向”定义环境差异，而不是“配置越多越专业”。
- 开发配置优先速度，生产配置优先稳定和成本。
- 环境区分应和 CI/CD 流程保持一致。