为 Web Worker 使用不同的 output.libraryTarget答案

【问题标题】：Use different output.libraryTarget for a Web Worker为 Web Worker 使用不同的 output.libraryTarget
【发布时间】：2021-11-26 12:37:04
【问题描述】：

我有这个 Webpack 配置：

{
  output: {
    libraryTarget: "system",
    ...
  },
  ...
}

我正在尝试使用 Web Worker。我正在使用standard Webpack 5 syntax：

new Worker(new URL('./MyWorker', import.meta.url));

现在 Webpack 将 Web Worker 输出为 System.js 模块。如何在不影响主包的情况下将其更改为不同的东西，例如 ES 模块？

【问题讨论】：

标签： javascript webpack web-worker webpack-5

【解决方案1】：

您可以使用chunkFormat 指定块格式是什么，worker 默认为array-push、https://webpack.js.org/configuration/output/#outputchunkformat。

您还可以为不同的条目创建具有不同目标的多个配置。

const config = {
  //
}

module.exports = (env) => {
  if (env.module) {
    config.entry = //path/to/index
    config.output.libraryTarget = 'module'
  } else {
    config.entry = //path/to/worker
    config.output.libraryTarget = 'umd'
  }

  return config
}

然后您可以单独编译您的 web worker 或与其他不同的块。您也可以同时使用chunkFileName: () =>。

如果你想在一次运行中编译它，而不必使用不同的配置运行两次，你也可以手动调用 webpack 编译器同时使用这两个配置。

import {Compiler} from 'webpack'
// or import webpack from 'webpack'

compiler.run(config)
compiler.run(config2)

然后你可以同时运行它们并编译所有东西。

另一个可能的选项是enabledChunkLoadingTypes，https://webpack.js.org/configuration/output/#outputenabledchunkloadingtypes，这将允许您指定 webpack 将根据入口函数自动使用的块的可用加载类型。我自己从未使用过，所以我不知道这是否会起作用，但您可以尝试一下。

【讨论】：

chunkFormat 和 enabledChunkLoadingTypes 对我不起作用。至于多种配置，我已经在使用这种解决方法，但我希望有一个更简单的解决方案。