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

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

Я изменил конфигурацию веб-пакета, чтобы создать отдельный пакет для веб-мастера (см. 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:///'
    }),

    ...
}

webpack javascript angular web-worker webpack-3
person dcs3spp    schedule 23.05.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

npm install worker-loader --save-dev

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

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

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

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

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

const myWorker = new Worker();

myWorker.postMessage();

myWorker.onmessage = function(){...}
person Dominic Unimog Atsu    schedule 11.02.2019