Webpack如何为Web Worker单独配置不同的output.libraryTarget

你可以通过Webpack 5内置的Worker专属配置项实现需求，完全不会修改主包原有配置：

全局统一修改所有Worker输出格式 #

在Webpack配置的根层级新增worker配置字段，单独指定Worker的输出规则：

module.exports = {
  // 原有主包配置完全保留
  output: {
    libraryTarget: "system",
    // 其他原有output配置不变
  },
  // 新增Worker专属输出配置
  worker: {
    output: {
      // 此处修改为你需要的输出格式，例如ES模块
      libraryTarget: "module",
      // 其他Worker专属的output配置可在此添加，均不影响主包
    }
  },
  // 如果将Worker输出设置为ES模块，需要开启以下配置
  experiments: {
    outputModule: true
  },
  // 其他原有配置保持不变
}

所有通过new Worker(new URL('./MyWorker', import.meta.url))语法创建的Worker都会自动使用该专属配置。

针对单个Worker单独指定输出格式 #

如果你只需要修改个别Worker的输出格式，其余Worker沿用原有规则，可以直接在Worker引用路径上添加查询参数实现：

// 仅当前Worker采用ES模块输出
new Worker(new URL('./MyWorker.js?worker.output.libraryTarget=module', import.meta.url));

内容的提问来源于stack exchange，提问作者Michał Perłakowski