javascript - 共享包的 Webpack 4 关闭问题

Question

我正在尝试从 Webpack 3 升级到 Webpack 4，但在关闭共享包时遇到问题。

我的 webpack 设置为创建一个 shared.js文件在 a.js 之间共享我的代码和 b.js .特别是，在 shared.js包，有一个带有 store 的索引文件多变的。我们只导出一个名为 getStore() 的函数，返回 store .此电话为getStore发生在我们的不同地方 a.js和 b.js文件。

我们页面上的脚本阵容如下所示:

/** some html **/
<script src=""/scripts/shared.js""></script>
<script src=""/scripts/a.js""></script>
<script src=""/scripts/b.js""></script>

在 Webpack 3 中，当调用 getStore() 时shared.js 中的代码(来电)来自 a.js它第一次创建了 store 的实例然后调用返回 store来自 getStore()称呼。对 getStore() 的任何后续调用来自 a.js , 它不再创建 store 的实例相反，它从 getStore() 返回相同的值.然后在 a.js 之后完成并 b.js运行，当 b.js电话 getStore() , 它不会实例化 store相反，它使用与 a.js 相同的实例用过的。在这种情况下 store是同一个实例跨越a.js和 b.js .

但是在 Webpack 4 中，行为有所不同。当a.js在 shared.js 中调用代码，当代码首先引用 getStore() 时，与之前类似，它将创建一个新实例 store ，同时 a.js运行并调用 getStore()它返回相同的实例。然而，当b.js初始引用 shared.js代码，它不使用相同的实例 a.js使用，而是创建 store 的新实例和整个b.js的脚本运行，它引用第二个 store打电话时 getStore() .在这种情况下，有两个实例 store , 每个对于 a.js 都是独一无二的和 b.js .

不确定导致此问题的 Webpack 4 有何不同。我们不再使用 CommonChunksPlugin在 Webpack 3 中，现在使用内置的优化设置。以下是它们的配置方式。

网页包 3:

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

网页包 4:

optimization: {
    splitChunks: {
        cacheGroups: {
            shared: {
                name: 'shared',
                chunks: 'initial',
                minChunks: 2
            }
        }
    }
}

两种 Webpack 配置输出的文件大小大致相同，在调试和查看调用堆栈时，对 getStore() 的调用来自各自的 a/b.js 文件。

是否有关于为什么 a.js 的解释？和 b.js获取 shared.js 的单独实例store Webpack 4 中的对象与 Webpack 3 中获得相同实例的对象对比？当脚本相互依赖时，它们的闭包/范围应该如何处理共享代码？

Answer 1

不知道您是否弄明白了，但我想分享我的发现。

TL;DR:拆分块在每个调用它的库的公共(public) block 中实例化模块的新实例。

从一开始，您的 webpack 库应该具有如下所示的功能。

var r = n(34);

这会调用该库中的一个方法来检索模块:

function n(t) {
 if (n[t])
   return n[t].exports;
 var e = n[t] = {
   i: t,
   l: !1,
   exports: {}
 };
 return s[t].call(e.exports, e, e.exports, o),
 e.l = !0,
 e.exports
    }

我找不到任何文档，但是 t 是一个用来引用模块的数字(记住这个)。 s 是包含库可以 使用的所有模块的对象，n 是包含具有的所有模块的对象已经被库使用，本质上是缓存它们。当 n[t] 不存在时，webpack 将一个通用对象添加到 n 并且调用 返回 s[t].call(e.exports, e , e.exports, o) .

假设 t 是 34，webpack 将调用以下方法

    34: function(e, t, n) {
        "use strict";
        n.r(t);
        var r = n(36);
        t.default = function() {
            var e = r.a.pageLevelOOM && r.a.adinfoOOMHeader
              , t = r.a.pageLevelOOM && r.a.serverOOMHeader;
            return r.a.adinfoOverride ? e : t
        }
    },

Quick side note，公共(public) block 被添加到 webpackJsonp 下的窗口中。如果您在浏览器的控制台中输入 window.webpackJsonp[0][1]，您将看到一个具有数字键和值的对象是函数。

这里的关键部分是 webpack 基本上像这样在公共(public) block 中实例化每个模块。因此，每个库都会在公共(public) block 中拥有自己的模块版本。