javascript - Webpack - worker importScripts 的单独捆绑包

Question

要使用 importScripts 在 web worker 中加载特定于 worker 的包，我需要告诉 Webpack 将所有 Webpack 的客户端特定代码放入该 worker 包（webpackJsonp、_webpack_require__ 等）。

这是入口捆绑配置：

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"
    ]
}

这是我的插件配置：

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

工人代码是这样的：

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

我试过添加

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

但得到了While running in normal mode it's not allowed to use a non-entry chunk (worker_bundle)

如何告诉 webpack 我想要两个完全独立的自加载包？

Answer 1

我自己找到了答案。

首先，生成所谓的“清单”包，其中将包含 webpack 引导脚本和包之间通用的脚本。

我还没有找到一种方法来只创建引导脚本并将常用脚本复制到独立的包中，但这对我来说似乎不是问题。

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

其次，在加载其他捆绑包之前加载“清单”。

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

对于工人：

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