javascript - 具有两个公共(public) block 的 Webpack : one exported, 一个本地

Question

我想在多页面应用程序中使用 Webpack，将一些预先确定的依赖项捆绑到“vendor ” block 中，并将其余依赖项捆绑到“公共(public)” block 中。

例如，假设有两个入口点(每个有效地代表一个不同的页面)，pageA.js 和 pageB.js 都包含这段代码(在 EC6 中，通过Babel)，后面是他们自己的代码:

import $ from 'jquery';
require('bootstrap/dist/css/bootstrap.css');
import angular from 'angular';
import uitree from 'angular-ui-tree';

我希望将 jQuery 和 Bootstrap 捆绑到一个“vendor ” block 中，并将其余部分(无论是什么)捆绑到一个“公共(public)” block 中。

目标是:

• 我希望能够有另一个单独的构建，它能够依赖于相同的 vendor block ，而无需重新包含 vendor 库(我会明确声明那组 vendor 库，使其成为可用于任何需要它的子构建)。
• 我还希望不必在每次更改页面脚本时都重新处理 vendor block 。

这是我试过的配置:

module.exports = {
    entry : {
        "vendor" : [ "jquery", "bootstrap" ],
        "pageA" : "./src/pageA.js",
        "pageB" : "./src/pageB.js"
    },
    output : {
        path : path.join(__dirname, "./dest"),
        filename : "[name].chunk.js"
    },
    module : {
        loaders : [ {
            test : /bootstrap\/js\//,
            loader : 'imports?jQuery=jquery'
        },
        /* ... Some modules for angular and CSS processing ... */

        {
            test : /\.js?$/,
            include : [ path.resolve(__dirname, "./src") ],
            loader : 'babel',
            query : {
                presets : [ 'es2015' ]
            }
        }
        /* ... Some other settings for the fonts ... */ ]
    },
    plugins : [
        new webpack.ProvidePlugin({
            $ : "jquery",
            jQuery : "jquery"
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap : false,
            mangle : false,
            compress : false
        }),
        new CommonsChunkPlugin({
            name : "vendor",
            minChunks : Infinity
        }),
        new CommonsChunkPlugin({
            name : "commons",
            minChunks : 2
        })
    ]
};

通过上面的配置，我根据需要在 vendor.chunk.js 中获取了 jQuery 和 Bootstrap，但是 commons.chunk.js 文件几乎是空的，所有pageA.js 和pageB.js 常用的其余部分然后放入pageA.chunk.js 和pageB。 chunk.js(有效地复制该代码)。

如果我交换最后两个插件的顺序，commons.chunk.js 现在几乎包含所有内容(除非实际上特定于 pageA.js 和 pageB.js), vendor.chunk.js 几乎是空的:

plugins : [
    // ...,
    new CommonsChunkPlugin({
        name : "commons",
        minChunks : 2
    }),
    new CommonsChunkPlugin({
        name : "vendor",
        minChunks : Infinity
    })
]

有没有办法将预定义的库列表(例如 [ "jquery", "jquery-ui", "bootstrap"] 捆绑到一个特定的 block 中(以这样的方式它可以由完全独立的脚本使用)并且还有另一个公共(public) block 用于入口点之间常用的任何其他内容？

所有这一切的目的是能够稍后为另一个页面构建一段完全独立的代码，并告诉它不需要重新捆绑那些预定义的库。

这是代表我要实现的目标的图表:

然后我会在页面 A 上使用生成的脚本，如下所示:

<script src="vendor.js"></script>
<script src="common.js"></script>
<script src="pageA.chunk.js"></script>

在页面 C(完全独立于页面 A 和 B 构建):

<script src="vendor.js"></script>
<script src="common2.js"></script>
<script src="pageC.chunk.js"></script>

(我正在使用 Webpack 1.12.14。)

---

我已经尝试了 the only answer so far 中建议的解决方案.虽然这确实可以将 vendor block 与公共(public) block 分开，但由两个单独的构建生成的 vendor block (具有相同的定义)通常不能相互交换。这无法在两个构建中仅使用其中一个 vendor block (即使它们实际上相同)。

Answer 1

我正在做类似的事情。我通过这种配置观察到了您想要的行为:

const entryPath = path.resolve(__dirname, "src", "modules"),
    entryPoints = {
        vendor: ["babel-polyfill", "react", "react-dom", "react-pure-render", "react-simpletabs", "react-redux", "redux", "redux-thunk"],
        a: entryPath + "/a.js",
        b: entryPath + "/b.js",
        c: entryPath + "/c.js",
        d: entryPath + "/d.js",
        ...
    }, plugins = [
        new CommonsChunkPlugin({
            name: "commons",
            filename: "commons.bundle.js",
            minChunks: 2,
            chunks: Object.keys(entryPoints).filter(key => key !== "vendor")
        }),
        new CommonsChunkPlugin("vendor", "vendor.bundle.js"),
        new ExtractTextPlugin("[name].bundle.css", {
            //allChunks: true
        })
    ];

所以上面这段代码留在 b.bundle.js 中仍然是一些 React 和其他 React 库的导入。在我将“固定数据表”添加到 vendor 列表后，它消失了，唯一的 react 源代码在 vendor.bundle.js 中，我想这就是您要找的东西？ (最后，每个未在 vendor 列表中列出的 vendor 最终都在每个自己的 module.bundle.js 中，或者在 commons.bundle.js 中，如果它在多个包中被重新使用的话)

问候乔纳斯