Как ссылаться на Web Workers в производственных сборках из webpack? - PullRequest
Новая
       30

Как ссылаться на Web Workers в производственных сборках из webpack?

0 голосов
/ 23 мая 2018

Я использую шаблон веб-пакета для Angular, предоставленный семенем углового стартера в Angular Webpack Starter .Это использует chunkhashing для производственных сборок (см. Webpack.prod.js).

Я изменил конфигурацию webpack, чтобы сгенерировать отдельный пакет для веб-работника (см. Webpack.common.js).Имя файла генерируется в каталоге dist и называется worker. [Chunkhash] .bundle.js .

Есть ли способ определить chunkhash для пакета, чтобы его можно было правильно импортироватьв конструктор Worker, например, 

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:///'
    }),

    ...
}

1 Ответ

0 голосов
/ 11 февраля 2019

Попробуйте использовать загрузчики веб-пакетов. 

npm install worker-loader --save-dev

в папке модулей, используйте 

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

Затем запустите сборку веб-пакета.Webpack создаст [hash] .worker.js в вашем файле комплекта.Если вы запустите свое приложение и будете следить за сетью, вы заметите, что ваш файл [hash] .worker.js обслуживается и кэшируется.

Теперь вы можете использовать веб-работников, импортировав их.Обратите внимание на работника-грузчика!Префикс необходим для вызова файла worker.js.

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

const myWorker = new Worker();

myWorker.postMessage();

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