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

Question

我想知道是否真的可以在 webpack 中处理 Web Worker“标准语法”(例如 varworker = new Worker('my-worker-file.js');)以及如何处理？

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

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

与 browserify ，我会使用 workerify转换，但我在 webpack 的世界中找不到任何东西。

Answer 1

您可以配置 Webpack 将工作器 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。最后，它与我上面描述的过程完全相同，唯一的区别是 bundle 的名称是自动为您管理的。