对 Web Worker 使用不同的 output.libraryTarget

Question

我有这个 Webpack 配置：

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

我正在尝试使用网络工作者。我使用标准 Webpack 5 语法：

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

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

Answer 1

您可以用来chunkFormat指定块格式是什么，默认情况下是workers 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
}

然后你可以单独编译你的网络工作者或与其他人不同的块。您也可以chunkFileName: () =>与它一起使用。

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

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

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

然后您可以同时运行它们并编译所有内容。

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