javascript - 为 Web Worker 使用不同的 output.libraryTarget

Question

我有这个 Webpack 配置:

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

我正在尝试使用网络 worker 。我正在使用 standard Webpack 5 syntax :

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

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

Answer 1

您可以使用chunkFormat要指定 block 格式是什么，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
}

然后，您可以单独编译您的网络 worker 或与其他人不同的 block 。您也可以使用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 将根据入口函数自动使用的 block 的可用加载类型。我自己从来没有使用过，所以我不知道这是否会起作用，但你可以尝试一下。