javascript - 如何在 webpack 的生产版本中引用 Web Workers？

Question

我正在使用 Angular 的 webpack 模板，由 Angular 启动种子提供 Angular Webpack Starter 。这使用 chunkhashing 进行生产构建(请参阅 webpack.prod.js)。

我修改了 webpack 配置，为 webworker 生成单独的包(请参阅 webpack.common.js)。文件名在 dist 目录中生成，并命名为 worker.[chunkhash].bundle.js。

是否有任何方法可以确定包的 chunkhash，以便可以将其正确导入到 Worker 构造函数中，例如

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

或者，更好的做法是

1. 将 Web Worker 的 javascript 存储在 asset 文件夹中，let w: Worker = new Worker('assets/js/worker.js')。

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

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

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 加载器。

npm install worker-loader --save-dev

在模块文件夹中，使用

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

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

您现在可以通过导入来使用 Web Worker。注意 worker 装载机!调用worker.js 文件需要该前缀。

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

const myWorker = new Worker();

myWorker.postMessage();

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