如何使用 webpack 处理 Web Worker 的“标准”语法？答案

【问题标题】：How to handle Web Workers "standard" syntax with webpack?如何使用 webpack 处理 Web Worker 的“标准”语法？
【发布时间】：2016-01-18 09:58:02
【问题描述】：

我想知道是否真的可以在 webpack 中处理 Web Worker “标准语法”（例如 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，我会使用workerify 转换，但我在 webpack 的世界中找不到任何东西。

【问题讨论】：

你想使用 webpack 包而不是它的加载器来处理文件类型？
我不介意使用装载机。但是 worker-loader 需要使用非标准语法更新源代码。我宁愿找到一个符合标准 Worker 语法且不需要更改源的解决方案。
相关：关于如何在不使用任何 webpack/browersify 插件的情况下内联工作人员的有趣方法：twitter.com/rauschma/status/820286148765425664

标签： webpack web-worker

【解决方案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。最后，它与我上面描述的过程完全相同，唯一的区别是捆绑包的名称是自动为您管理的。

【讨论】：

我仍然觉得烦人的是我需要引用包名称（在您的示例中为worker.js）而不是源条目文件（./app/my-worker-file.js）。它在源代码和我试图避免的 webpack 配置之间创建了依赖关系。但我认为这是目前最好的解决方案，所以感谢您的回复！
实际上使用任何javascript文件都没有问题，即使是像./app/my-worker-file.js这样的自立文件，例如使用CopyWebpackPlugin将文件传递到构建目录。但是，如果您不使用捆绑包，那么您将失去将 require 依赖项添加到工作文件中的能力。
顺便说一句 - 避免 webpack 配置和源代码之间的依赖正是 worker-loader 给你的。如果您不想在源代码中显式编写 require('worker!....')（例如，为了避免显式依赖 webpack），那么您可以简单地配置 webpack 以使用工作加载器：module: { loaders: [ { test: /\.worker.js$/, loader: 'worker' } ] }
或 ... loaders: ['worker', 'babel'] 如果您正在使用例如通天塔。
我读到了一个新的 webpack 插件，它似乎完全符合我最初在那个帖子中提出的要求。我还没有测试它，但对于今天遇到这个问题的人来说可能值得一试。见github.com/GoogleChromeLabs/worker-plugin

【解决方案2】：

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

【讨论】：

这是我用的。但当然，它最近才可用。在提出原始问题时，这并不存在。