Webpack - 工作者importScripts的单独包

时间:2018-05-15 13:46:42

标签: javascript webpack commonschunkplugin

使用importScripts在我需要的Web worker中加载特定于worker的bundle 告诉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'
    }),
],

工人代码是这样的:

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我想要两个完全独立的可自行加载的捆绑包?

1 个答案:

答案 0 :(得分:0)

我自己找到了答案。

首先,生成所谓的' manifest'包含webpack引导脚本和脚本的bundle,它们在bundle之间很常见。

我还没有找到一种方法来只创建引导脚本并将常见脚本保留在独立包中,但对我的情况来说似乎不是问题。

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");