Webpack忽略未使用导出导致打包文件为空的问题求助

Webpack默认的Tree Shaking机制会移除未被实际使用的导入代码，这就是你只导入Ajax但未使用时打包文件为空的原因。要强制保留这些未使用的导出，可按以下方案处理：

方案1：通过配置文件关闭Tree Shaking对目标模块的处理 #

创建项目根目录的webpack.config.js文件，写入以下配置：

module.exports = {
  entry: './src/entry.js',
  output: {
    filename: 'entry.min.js',
  },
  module: {
    rules: [
      // 标记ajax模块有副作用，避免被Tree Shaking移除
      {
        test: /ajax\.js$/,
        sideEffects: true,
      },
    ],
  },
  optimization: {
    usedExports: false, // 关闭导出使用分析，阻止Webpack标记未使用导出为可移除
  },
};

之后运行npx webpack即可打包出包含Ajax类的文件。

方案2：强制标记导出为已使用 #

在入口文件entry.js中添加一行代码，让Webpack认为Ajax被使用了：

import { Ajax } from "./modules/ajax/ajax.js";
// 强制绑定到全局，让Webpack识别为已使用
window.Ajax = Ajax;

这种方式不需要修改Webpack配置，适合快速验证效果。

为什么你之前的尝试无效 #

• --optimization-used-exports默认开启时，Webpack会分析导出是否被使用，标记后供压缩工具移除无用代码；你需要将它设为false才能关闭这个分析。
• --optimization-side-effects如果设为false，会更严格地移除无副作用模块，反而加剧问题；正确的做法是标记目标模块为有副作用。

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