Webpack 5中libraryTarget设为amd时，如何正确使用Web Workers？

这个问题并非Webpack的Bug，而是默认配置会将所有入口（包括Web Worker）统一应用全局的AMD包裹规则，而Web Worker的运行环境不存在AMD的define函数，因此触发报错。你可以通过以下几种方式针对Worker入口单独调整输出配置：

方法1：通过入口名称条件设置library配置 #

在Webpack配置中，利用output.library的函数形式，根据入口名称判断是否应用AMD格式：

module.exports = {
  entry: {
    app: './src/main.js', // 主应用入口（需要AMD包裹）
    worker: './src/worker.js' // Worker入口（不需要AMD包裹）
  },
  output: {
    filename: '[name].js',
    // 根据入口名称动态设置library规则
    library: (chunk) => {
      // 仅对主入口应用AMD格式
      if (chunk.name === 'app') {
        return { type: 'amd' };
      }
      // Worker入口不设置library，避免被define包裹
      return undefined;
    }
  },
  // 其他必要配置（如模块解析、插件等）
};

方法2：通过Worker模块规则单独配置输出 #

如果你的Worker文件有统一命名规则（比如后缀为.worker.js），可以在module.rules中针对这类文件单独设置输出格式，跳过AMD包裹：

module.exports = {
  module: {
    rules: [
      {
        test: /\.worker\.js$/,
        type: 'worker', // Webpack5内置的Worker处理类型
        generator: {
          filename: '[name].worker.js',
          // 对Worker模块禁用AMD包裹，设置为普通变量或直接暴露
          library: {
            type: 'var', // 可选，也可以省略library配置直接输出自执行代码
            name: 'MyWorker'
          }
        }
      }
    ]
  },
  output: {
    // 全局默认应用AMD格式（针对主应用）
    library: { type: 'amd' },
    filename: '[name].js'
  }
};

方法3：拆分配置单独构建Worker #

如果上述方法不适用，可以拆分Webpack配置文件，单独为Worker编写不包含AMD配置的构建脚本：

1. 创建webpack.worker.config.js：

module.exports = {
  entry: './src/worker.js',
  output: {
    filename: 'worker.js',
    // 不设置library相关配置，直接输出普通代码
  },
  // Worker相关的其他配置
};

2. 在package.json的scripts中添加单独的构建命令：

{
  "scripts": {
    "build:app": "webpack --config webpack.config.js",
    "build:worker": "webpack --config webpack.worker.config.js",
    "build": "npm run build:app && npm run build:worker"
  }
}

这样构建出来的Worker文件不会被AMD的define函数包裹，就能在Worker环境正常运行。

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