Webpack5中函数直接执行的原因？与Webpack4构建结果差异解析

我的文件 #

注意：你粘贴时可能出现了错误，index.js和webpack.config.js内容完全一致，推测实际index.js是包含业务逻辑的文件（比如含有console.log(1+2)这类代码），以下是你提供的Webpack配置文件：

webpack.config.js #

const path = require("path");

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  entry: path.resolve(__dirname, "index.js"),
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  optimization: {
    usedExports: true,
  }
};

构建结果对比 #

Webpack4构建结果 #

(()=>{"use strict";console.log(1+2)})();
//# sourceMappingURL=main.js.map

Webpack5构建结果 #

(()=>{"use strict";console.log(3)})();
//# sourceMappingURL=main.js.map

原因解析 #

这是Webpack5增强了**常量折叠（Constant Folding）**优化能力导致的：

• 在生产模式下，Webpack会对代码做编译优化，Webpack4的常量折叠仅处理简单场景，函数内的表达式会保留原写法；
• Webpack5则进一步强化了该优化，会在编译阶段直接计算所有可确定结果的常量表达式（比如数值运算、固定字符串拼接等），将其替换为最终结果，以此减少运行时的计算开销，提升代码执行效率。

这种优化属于正常的编译行为，不会改变代码逻辑，只是提前完成了运行时本就会执行的计算。如果确实需要保留原表达式，可以通过添加/* webpackIgnore: true */注释标记，或者调整Webpack的优化配置，但一般不建议这么做，会损失性能收益。

内容的提问来源于stack exchange，提问作者Vincent Cheung