javascript - Webpack - 用于 worker importScripts 的单独包

Question

要使用 importScripts 在网络 worker 中加载特定于 worker 的包，我需要
告诉 Webpack 将所有 Webpack 的客户端特定代码放入该工作包(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'
    }),
],

worker 代码是这样的:

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

我自己找到了答案。

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

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

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

其次，在加载其他包之前加载“ list ”。

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

对于 worker :

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