如何在webpack中使用javascript webworker？

Question

我试图在我的web应用中使用web workers，但我遇到了一段艰难的时期。向webpack.config.js添加新条目不起作用。

因此，我尝试使用名为worker-loader的npm包，但没有正确的示例说明如何使用它。我所有使用它的尝试都失败了。你们能给我举个简单的例子来说明如何使用它吗？

import Worker from "worker-loader!./Worker.js";
const myworker = new Worker();
myworker.postMessage(songs);
myworker.onmessage = function(Data) {
//do something
}

我的webpack.config.js文件如下所示

 entry: __dirname + "/js/index.js",
 output: {
 path: __dirname + "/dist",
 filename: "bundle.js"
 },  
{
  module: {
    rules: [
     {
    test: /\.worker\.js$/,
    use: { loader: 'worker-loader' }
  }
]
}
}

我的服务器告诉我以下内容：

"GET /279b1e1fcb403131377a.worker.js HTTP/1.1" 404

因为我的279b1e1fcb403131377a.worker.js在/dist里面，所以它给了我404错误。如何发出进入/dist内部的请求。

Answer 1

在Github的官方页面上有很多例子：

https://github.com/webpack-contrib/worker-loader

这应该很容易让你上手。