How to use webpack babel-loader and es6 with worker-loader?

Question

I'm trying to use worker-loader with babel for es6 import support in web worker code.

I have the following setup in my webpack.config.js

   {
     test: /\.worker\.js$/,
     loader: "worker!babel",
     presets: ['es2015']
   }

This correctly produces a sepearte bundle file for the worker with a hash name like d46f60b8e184bf8b1cb8.worker.js

However this file is not run through the Babel transforms and converted to es5. So it contains raw es6 import statmenets and syntax that is failing in a browser. Looks like:

/* 0 */
/***/ function(module, exports) {

    import _ from 'lodash';

    var o = {foo: 'foo'};

    _.has(o, 'foo'); // true

    setInterval(() => {
       postMessage({tick: Date.now()});
    }, 1000);


/***/ }
/******/ ]);

I have tried switching the order of the loaders like:

   {
     test: /\.worker\.js$/,
     loader: "babel!worker",
     presets: ['es2015']
   }

and also tried moving it to preLoaders and postLoaders with no success.

Answer 1

I ran into the same problem and had success by using the query string parameter mentioned under options here:

So:

{
    test: /\.worker\.js$/,
    loader: "worker!babel?presets[]=es2015"
}