如何使用 webpack 处理 Web Workers "standard" 语法？

Question

我想知道是否真的可以在 webpack 中处理 Web Worker "standard syntax"（例如 var worker = new Worker('my-worker-file.js');）以及如何处理？

我知道 worker-loader 但据我所知它需要特定的语法并且与标准语法不兼容。

换句话说，是否可以在不更改代码的情况下将该文件与 webpack 捆绑在一起？ -> https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js#L8

有了browserify, I would use workerify transform，但是我在webpack的世界里找不到任何东西

Answer 1

您可以配置 Webpack 将您的 worker js 文件打包到一个单独的包中。在 webpack.config.js:

{
  entry: {
    bundle: './app/main.js',
    worker: './app/my-worker-file.js'
  },
  output: {
    filename: '[name].js'
  }
  ...
}

这样您可以获得两个包：bundle.js 与您的主应用程序和 worker.js 与工作入口点。然后，在你的主包中，你可以做 new Worker('worker.js')

worker-loader 基本上是一样的。每当通过它加载某些东西时，它都会创建一个单独的包条目，可以这么说，它被自动命名为 [hash].worker.js。然后它将此文件名存储到从 require('worker!...') 返回的函数中，该函数只是将其传递给 new Worker。最后，它与我上面描述的过程完全相同，唯一的区别是捆绑包的名称是自动为您管理的。

Answer 2

从webpack5开始，webpack提供the built in way of handling web work没有worker-loader

如何使用 webpack 处理 Web Workers "standard" 语法？

How to handle Web Workers "standard" syntax with webpack?

web-worker

webpack