TypeScript项目中Webpack多环境配置的核心是“一份通用+多份环境专属+动态加载”，即拆分为webpack.common.js（入口、输出、ts-loader等）、webpack.dev.js（热更新、source map）和webpack.prod.js（压缩、Tree Shaking），通过webpack-merge安全合并，并借助--env参数动态加载对应配置，同时结合fork-ts-checker-webpack-plugin分离类型检查、DefinePlugin注入环境变量实现TS环境适配。
TypeScript 项目中用 Webpack 做多环境配置分离，核心是“一份通用 + 多份环境专属 + 动态加载”。不靠硬编码判断，而是靠文件拆分 + 合并工具 + 环境参数驱动。
拆成三个基础配置文件
把配置按职责切开，避免一个文件越写越大、越改越怕：
- webpack.common.js：放入口（entry）、输出路径（output.path）、resolve.extensions（必须含 .ts/.tsx）、基础 loader（如 ts-loader）、插件（如 DefinePlugin 注入基础变量）
- webpack.dev.js：只加开发需要的——devtool（推荐 'eval-source-map'）、HotModuleReplacementPlugin、webpack-dev-server 配置、不压缩、启用 watch
- webpack.prod.js：专注构建结果——mode: 'production'、TerserPlugin 压缩、SplitChunks 提取 vendor、filename 加 [contenthash]、DefinePlugin 注入 NODE_ENV='production'
用 webpack-merge 安全合并
手动 spread 或 Object.assign 容易覆盖或遗漏。用 webpack-merge 可以智能合并数组（如 plugins）、深度合并对象（如 optimization），避免 dev 的 source map 覆盖 prod 的压缩配置：
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
optimization: {
minimize: true,
minimizer: [new TerserPlugin()]
}
});
通过 --env 参数动态选配置
在 package.json 的 scripts 里传参，Webpack 配置函数就能接收并返回对应配置：
"build": "webpack --env production --config ./webpack.config.js""dev": "webpack serve --env development --config ./webpack.config.js"
然后在 webpack.config.js 中导出函数：
module.exports = (env) => {
if (env.production) {
return require('./webpack.prod.js');
}
return require('./webpack.dev.js');
};
TypeScript 相关环境适配要点
TS 不只是加个 loader，环境不同，编译行为也要区分：
- 开发时用
fork-ts-checker-webpack-plugin把类型检查放到独立进程，不影响热更新速度 - 生产构建前确保
tsconfig.json中"module": "esnext"，否则 Tree Shaking 失效 - 通过 DefinePlugin 注入
process.env.NODE_ENV，让 TS 代码里能写if (process.env.NODE_ENV === 'development') {...}，Webpack 会在打包时静态剔除死分支
