Question

我正在使用Angular的webpack模板，由Angular Webpack Starter处的角度起始种子提供。这为生产构建使用了chunkhashing（参见webpack.prod.js）。

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

有没有办法确定一个bundle的chunkhash，以便它可以正确地导入到Worker构造函数中，例如

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

或者，是否更好的做法

在资源文件夹let w: Worker = new Worker('assets/js/worker.js')中为网络工作者存储javascript。
使用 CopyWebPackPlugin 将web worker javascript从源文件夹复制到build文件夹。

有人可以建议引用网络工作者的最佳做法吗？

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

在您的modules文件夹中，使用

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

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

您现在可以通过导入来使用Web Worker。注意工作人员！调用worker.js文件需要前缀。

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

const myWorker = new Worker();

myWorker.postMessage();

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

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

webpack.common.js

webpack.prod.js

1 个答案: