web-dev-qa-db-ja.com

WebpackでWebワーカーの「標準」構文を処理する方法は?

WebpackでWebWorkerの「標準構文」(例:var worker = new Worker('my-worker-file.js');)を実際に処理できるかどうか、またどのように処理できるのでしょうか。

worker-loader については知っていますが、私が理解している限り、特定の構文が必要であり、標準の構文と互換性がありません。

言い換えれば、コードを変更せずにそのファイルをwebpackにバンドルすることは可能ですか? -> https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js#L8

browserify の場合、 workerify transformを使用しますが、webpackの世界では何も見つかりません。

20
dhar

ワーカーjsファイルを別のバンドルにパックするようにWebpackを構成できます。 webpack.config.js

{
  entry: {
    bundle: './app/main.js',
    worker: './app/my-worker-file.js'
  },
  output: {
    filename: '[name].js'
  }
  ...
}

このようにして、2つのバンドルを取得します。メインアプリケーションのbundle.jsと、ワーカーエントリポイントのworker.jsです。次に、メインバンドル内で、new Worker('worker.js')を実行できます。

worker-loaderは基本的に同じことをします。何かがロードされるたびに、いわば別のバンドルエントリが作成され、自動的に[hash].worker.jsという名前が付けられます。次に、このファイル名をrequire('worker!...')から返される関数に格納し、new Workerに渡します。最後に、これは上記で説明したプロセスとまったく同じですが、バンドルの名前が自動的に管理される点が異なります。

11
Stefan Dragnev