Javascript 如何从webpack在生产构建中引用Web工作人员？

我正在使用Angular的网页模板，由Angular starter seed提供。这在生产构建中使用了ChunkHash（参见webpack.prod.js）

我已经修改了webpack配置，为webworker生成了一个单独的包（参见webpack.common.js）。文件名在dist目录中生成，并命名为worker。[chunkhash].bundle.js

有没有办法确定bundle的chunkhash，以便将其正确导入辅助构造函数，例如

let w: Worker = new Worker('worker' + chunkhash_variable + '.bundle.js')

或者，这是更好的做法吗

将web工作者的javascript存储在资产文件夹中，

让w:Worker=new Worker（'assets/js/Worker.js'）

使用CopyWebPackPlugin将web worker javascript从源文件夹复制到生成文件夹

有谁能建议引用web工作者的最佳实践吗

webpack.common.js webpack.prod.js

---

尝试使用网页包加载程序

npm install worker-loader --save-dev

在模块文件夹中，使用

{test: /\.worker\.js$/, use: { loader: 'worker-loader' }}

然后运行你的网页包构建。Webpack将在您的捆绑文件中创建[hash].worker.js。如果您运行应用程序并监视网络，您会注意到您的[hash].worker.js文件正在被提供和缓存

您现在可以通过导入web workers来使用它。注意工人装载机！调用worker.js文件需要前缀

import Worker from 'worker-loader!./worker.js'

const myWorker = new Worker();

myWorker.postMessage();

myWorker.onmessage = function(){...}

{test: /\.worker\.js$/, use: { loader: 'worker-loader' }}

import Worker from 'worker-loader!./worker.js'

const myWorker = new Worker();

myWorker.postMessage();

myWorker.onmessage = function(){...}