如何引用的Web工人在生产中，从构建的WebPack？

Question

我使用角一个的WebPack模板，通过在Angular Webpack Starter角起动种子提供。这种采用chunkhashing生产建立，（见webpack.prod.js）。

我已经修改了的WebPack配置生成一个单独的束用于webworker（参见webpack.common.js）。文件名称用dist目录，并命名为工人产生。[chunkhash] .bundle.js。

有什么方法来确定一个包中的chunkhash，以便它可以正确导入到工人的构造函数，例如

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

或者，是不是更好的做法

1. 存储网络工作者JavaScript中的资产文件夹，let w: Worker = new Worker('assets/js/worker.js')。
2. 使用CopyWebPackPlugin复制的网络工作者的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装载机。

npm install worker-loader --save-dev

在你的模块文件夹，使用

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

然后运行你的WebPack版本。的WebPack将一个了解创建[散列] .worker.js组合中的文件。如果你运行你的应用程序，并监视网络，你会发现，你的[散列] .worker.js文件被送达和缓存。

现在，您可以通过导入它使用网络工作者。注意工人装载机！前缀需要调用worker.js文件。

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

const myWorker = new Worker();

myWorker.postMessage();

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