如何移除Webpack输出文件中的__webpack_exports__变量？

__webpack_exports__是Webpack为存在导出语句的入口模块生成的变量，用于收集模块的导出内容——哪怕导出的内容从未被使用，只要入口代码里有export关键字，这行代码就会自动生成。

根据你的需求，这里提供两种解决方案：

方案1：移除入口的导出语句（最直接） #

既然你希望输出接近手动合并的JS，且仅作为单个<script>标签运行，大概率不需要向外暴露变量。直接删掉app.ts里的导出语句即可：

修改后的app.ts：

import { name } from "./variable";
console.log(name);
// 移除export语句，改为普通变量声明
let foo = "baz";

重新构建后，var __webpack_exports__ = {};这行代码会自动消失。

方案2：保留导出的同时，用自定义插件移除该行代码 #

如果必须保留导出语句，可以通过Webpack自定义插件在构建阶段删除目标代码。修改webpack.config.js，添加一个简单的插件：

const path = require('path');

module.exports = {
  mode: "production",
  entry: { main: "./src/app.ts", },
  output: {
    iife: false,
    path: path.resolve(__dirname, './dist'),
    filename: "script.js",
  },
  optimization: { minimize: false, },
  resolve: { extensions: [".ts", ".js"], },
  module: {
    rules: [
      { test: /\.ts$/, loader: "ts-loader" },
    ]
  },
  // 添加自定义插件
  plugins: [
    {
      apply(compiler) {
        compiler.hooks.emit.tap('RemoveWebpackExports', (compilation) => {
          const targetFile = 'script.js';
          const asset = compilation.assets[targetFile];
          if (!asset) return;
          
          let code = asset.source();
          // 匹配并删除目标行
          code = code.replace(/var __webpack_exports__ = {};\n/, '');
          // 更新输出文件内容
          compilation.assets[targetFile] = {
            source: () => code,
            size: () => code.length
          };
        });
      }
    }
  ]
};

这个插件会在Webpack准备输出文件时，自动找到script.js并移除目标代码，同时保留其他内容不变。

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