Webpack - separate bundle for worker importScripts

Question

To use importScripts to load worker-specific bundle in web worker I need to tell Webpack to put all Webpack's client side specific code to that worker bundle (webpackJsonp, _webpack_require__, etc.).

Here's entry bundle config:

entry: {
    app: [
        'lodash',
        'jquery',
        'index',
    ],
    worker_bundle: [
        "parlib/atomics-shim.js",
        "parlib/message.js",
        "parlib/master-barrier.js",
        "parlib/worker-barrier.js",
        "parlib/marshaler.js",
        "parlib/worker-par.js"
    ]
}

And here's my plugins config:

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'app', 
        filename: 'app.js'
    }),
],

Worker code is this:

importScripts(location.origin + "/worker_bundle.js");
new WorkerPar();

I've tried adding

new webpack.optimize.CommonsChunkPlugin({
    name: 'worker_bundle', 
    filename: 'worker_bundle.js'
}),

but got While running in normal mode it's not allowed to use a non-entry chunk (worker_bundle)

How to tell webpack I want two completely independent self-loadable bundles?

Answer 1

I've found an answer by myself.

First, generate so called 'manifest' bundle which will contain webpack bootstrap scripts and scripts which are common between bundles.

I've not found a way to create only bootstrap script and keep common scripts duplicated in independent bundles, but it seems to be not an issue for my case.

plugins: [
    new webpack.optimize.CommonsChunkPlugin({name: "manifest", minChunks:0})
]

Second, load 'manifest' before loading other bundles.

<script type="application/javascript" src="manifest.js"></script>
<script type="application/javascript" src="app.js"></script>

and for worker:

importScripts(location.origin + "/manifest.js");
importScripts(location.origin + "/worker_bundle.js");