[Feature] support code splitting? about worker-loader HOT 12 OPEN

+1

from worker-loader.

Could you try to give an example for that please?

from worker-loader.

Absolutely!

Imagine that you are using lodash, bluebird etc. from a common file (common.js) and you need the libs in common.js in both "normal code" and "worker code". Before using webpack I could add common.js to my index.html file and import it in my worker with self.importScripts('common.js'); (https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts)

Since common.js would be cached by the browser it would only be loaded once. With webpack I see that my worker has all the libs included in worker.js but it could have included my common.js that is a common chunk used by all my apps.

from worker-loader.

I have a similar question. I use lodash in both main chunk and web worker chunk. Right now it's bundled with both chunks. I assume that I need somehow to create a common chunk. How to configure this properly?

from worker-loader.

I created an example of this problem at this repo.

While importScripts can be used to include webpack bootstrap functions / commons chunks, you don't have enough info to actually require the modules you need. This should be done in either worker-loader or in another plugin and not manually... though I don't know enough about plugin / loader development to provide a solution

from worker-loader.

// TODO remove and tand make this functionality a loader option instead, 
// since this doesn't work with webpack > v2.0.0 anymore
if (this.options && this.options.worker && this.options.worker.plugins) {
  this.options.worker.plugins.forEach(plugin => worker.compiler.apply(plugin));
}

webpack.config.js

{
  test: /\.worker\.js$/,
  use: {
    loader: 'worker-loader',
    options: {
      plugins: [ new CommonChunksPlugin() ]
    }
  }
}

from worker-loader.

@michael-ciniawsky , @d3viant0ne -

I have a similar ask for my application. My web worker has to currently wrap rxjs, lodash etc for it's operations while I already have a vendor utility JS spit out by webpack.

Looking for some help/suggestions.

webpack: v3.8.1
worker-loader: v0.8.1

Thanks,
Suds

from worker-loader.

Fwiw the plugin works fine for me when using a shim like this:

const window = self;

importScripts("vendor.bundle.js");
importScripts("worker.bundle.js");

A shim is necessary because the worker needs the bootstrapping code to be loaded first. In the main app this is done by simply importing via the webpage, but here the worker must import it (and hence the "worker", or in this case the shim, must already be loaded)

The way I use the shim here is in a plain js file that is not processed through webpack (and hence does not need the bootstrapping code)

The bootstrapping code tries to use window instead of self, so assigning window to self fixes that ;)

from worker-loader.

@dakom thanks for the response!
Would it be possible for you to copy/highlight the plain js code you mentioned?

from worker-loader.

hi @roysudi - believe it or not, that snippet above is the entire plain js code :)

from worker-loader.

This issue is also being discussed at: webpack/webpack#6472

from worker-loader.

I wondering if it is possible to factorize duplicate code using DllPlugin ?

from worker-loader.