在默认情况下，Webpack 生成的运行时代码会尽量避免使用新语法，以保证产物能跑在老旧的浏览器里。其中变量声明统一采用 var，即使源代码里写满了 const 和 let，输出的运行时辅助代码依然保守。从 Webpack 5 开始，官方提供了 output.environment 配置项，允许开发者明确告知打包器目标环境支持哪些 ES 特性，其中 output.environment.const 就是专门用来声明目标环境是否支持 const 关键字的开关。
output.environment.const 的作用与取值
output.environment 是一个对象，用于告诉 Webpack 生成代码时可以使用哪些语言特性。const 属性的类型是布尔值：设为 true 表示目标运行环境支持 const 声明，Webpack 在生成的运行时代码中会直接使用 const；设为 false（默认值）则表示不支持，Webpack 会退回到 var 声明。这一点要特别注意——默认值是 false，而不是 true，很多初次使用的开发者会误以为现代浏览器普及后 Webpack 会自动启用，实际上必须手动开启或通过 target 推断。
下面是一个最基础的配置示例：
// webpack.config.js
module.exports = {
// ...
output: {
filename: 'bundle.js',
path: __dirname + '/dist',
environment: {
// 告诉 webpack 目标环境支持 const 声明
const: true
}
}
};
开启之后，可以对比打包产物中模块包装函数的输出差异。关闭时你会看到类似 var __webpack_modules__ = {...} 的代码，开启后则变成 const __webpack_modules__ = {...}。这个变化只影响 Webpack 自己生成的运行时代码（runtime、chunk 加载逻辑等），不影响你业务代码中已经写好的 const——业务代码里的语法是否保留取决于 target 和是否经过 babel 转译。
const 与 target 的关系：为什么不必总是手动配置
很多场景下你不需要显式写 environment.const，因为 target 选项会自动推断环境能力。例如设置 target: 'es2020' 或 target: ['web', 'es2020'] 时，Webpack 会认为目标环境完整支持 ES2020 及以下的特性，此时 const、箭头函数、可选链等全部视为可用，生成的代码会自然使用 const。
如果你的项目配置了 browserslist（比如 package.json 中的 browserslist 字段），Webpack 也会根据它来推断环境支持情况。推断逻辑是逐个特性判断的：某个浏览器版本一旦支持 const，这个选项就被推断为 true。这带来一个常见误区：开发者以为设置了 browserslist 却发现产物里全是 var，往往是因为 browserslist 范围里包含了 IE11 或较老的安卓 WebView，导致 const 被推断为不支持。排查时可以用 npx browserslist 命令查看实际生效的浏览器列表。
显式配置 environment 的典型场景是：target 设置为 node 或某个较宽泛的值，但你确切知道最终运行环境（例如内部系统的固定 Chrome 版本），此时手动声明可以覆盖推断结果，得到更精简现代的产物。与之相对的陷阱是：目标环境明明包含老浏览器却强行设置 const: true，产物在 IE11 中会直接抛出语法错误，而且这种错误发生在解析阶段，try-catch 都拦不住。
environment 中的其他选项与完整配置实践
const 只是 output.environment 家族中的一员，理解其他选项有助于整体把握这个配置的使用方式。常见的还有：arrowFunction（是否支持箭头函数，影响 runtime 中的回调写法）、destructuring（是否支持解构赋值）、dynamicImport（是否支持动态 import，决定懒加载 chunk 用原生 import 还是 JSONP 注入）、document（是否存在 document 对象）、asyncFunction 等。它们的取值逻辑与 const 一致，均为布尔值且默认关闭或由 target 推断。
一个面向现代浏览器的完整配置可以这样写：
// webpack.config.js
module.exports = {
mode: 'production',
target: 'web',
output: {
filename: '[name].[contenthash].js',
path: __dirname + '/dist',
environment: {
const: true, // 支持 const 声明
arrowFunction: true, // 支持箭头函数
destructuring: true, // 支持解构
dynamicImport: true, // 支持原生动态 import
asyncFunction: true, // 支持 async 函数
forOf: true, // 支持 for...of
module: false, // 不输出 ESM，仍用 CommonJS 包装
}
}
};
需要提醒的是，environment.module 设为 true 会改变输出格式为 ES Module，此时通常还要配合 experiments.outputModule 一起使用，否则会收到配置冲突的警告。而 dynamicImport: true 能让懒加载代码直接使用原生的 import()，在支持的环境中比 JSONP 方式性能更好，还能利用浏览器的模块预加载机制。
总结一下：output.environment.const 本身就是为支持 const 声明而设计的，答案毫无疑问是支持的，关键在于何时开启。现代浏览器项目推荐直接设置精确的 target（如 es2020）或收紧 browserslist 范围，让 Webpack 自动推断；确有特殊需求时再显式声明各个特性。配置完成后，建议检查一下产物头部代码，确认声明方式符合预期，同时不要忘了在真实的最低支持浏览器上做一轮回归验证，确保语法兼容万无一失。
Webpack配置output.environmentconst声明修改时间：2026-09-01 12:48:33