如何从 webpack 在生产构建中引用 Web Worker ?

Question

我正在使用 Angular 的 webpack 模板，由 Angular Webpack Starter 的角度启动器种子提供。这在生产构建中使用了块散列(请参阅 webpack.prod.js(。

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

有没有办法确定捆绑包的块哈希，以便可以将其正确导入 Worker 构造函数，例如

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

或者，更好的做法是

1. 将 Web 工作者的 JavaScript 存储在 assets 文件夹中，let w: Worker = new Worker('assets/js/worker.js').

2. 使用CopyWebPackPlugin将 Web worker javascript 从源文件夹复制到构建文件夹。

任何人都可以建议引用网络工作者的最佳实践吗？

webpack.common.js

module.exports = function (options) {
...
const entry = {
polyfills: './src/polyfills.browser.ts',
main:      './src/main.browser.ts',
worker:    './src/app/documents/webworkers/documentupload.webworker.js'
};
...
}

webpack.prod.js

module.exports = function (env) {
...
return webpackMerge(commonConfig({env: ENV, metadata: METADATA}), {
output: {
path: helpers.root('dist'),
filename: '[name].[chunkhash].bundle.js',
sourceMapFilename: '[file].map',
chunkFilename: '[name].[chunkhash].chunk.js'
},
module: {
rules: [
{
test: /.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
}),
include: [helpers.root('src', 'styles')]
},
{
test: /.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!sass-loader'
}),
include: [helpers.root('src', 'styles')]
},
]
},
plugins: [
new SourceMapDevToolPlugin({
filename: '[file].map[query]',
moduleFilenameTemplate: '[resource-path]',
fallbackModuleFilenameTemplate: '[resource-path]?[hash]',
sourceRoot: 'webpack:///'
}),
...
}

Answer 1

尝试使用 webpack loaders。

npm install worker-loader --save-dev

在模块文件夹中，使用

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

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

现在，您可以通过导入 Web 辅助角色来使用它。注意工人装载机！前缀是调用辅助角色.js文件所必需的。

import Worker from 'worker-loader!./worker.js'
const myWorker = new Worker();
myWorker.postMessage();
myWorker.onmessage = function(){...}