关于 webpack的 optimization.namedModules

webpack_devsave

optimization.namedModules 这个配置对于调试起来很方便,比如原本生产的一段代码是长这样的:

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([
    [1],
    [
        /* 0 */
        /***/
        (function(module, exports, __webpack_require__) {

            var utility2 = __webpack_require__(1);
            var utility3 = __webpack_require__(2);
            console.log(utility2 + utility3);
            module.exports = "pageC";

            /***/
        }),
        /* 1 */
        /***/
        (function(module, exports) {

            module.exports = "utility2";

            /***/
        }),
        /* 2 */
        /***/
        (function(module, exports) {

            module.exports = "utility3";

            /***/
        })
    ],
    [
        [0, 0]
    ]
]);

很多奇怪的数字,比如最后几行的 [0,0] 是表示了什么意思?

如果配置上namedModules 为true呢 (当然 mode = development时,默认也是开启的),则打包成这样了:

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([
    ["zpageC"], {

        /***/
        "./pageC.js":
            /***/
            (function(module, exports, __webpack_require__) {

                var utility2 = __webpack_require__("./utility2.js");
                var utility3 = __webpack_require__("./utility3.js");
                console.log(utility2 + utility3);
                module.exports = "pageC";

                /***/
            }),

        /***/
        "./utility2.js":
            /***/
            (function(module, exports) {

                module.exports = "utility2";

                /***/
            }),

        /***/
        "./utility3.js":
            /***/
            (function(module, exports) {

                module.exports = "utility3";

                /***/
            })

    },
    [
        ["./pageC.js", "pageInit"]
    ]
]);

最后几行的 [0,0] 被换成了["./pageC.js", "pageInit"],也更容易理解webpack打包出来的文件的加载机制了

此外单独配置一个 moduleIds:"named" (没有配置namedModules) 相当于 namedModules:true
moduleIds还可以使用 hashed选项:生产代码如下:

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([
    ["zpageC"], {

        /***/
        "8QXy":
            /***/
            (function(module, exports, __webpack_require__) {

                var utility2 = __webpack_require__("NcBz");
                var utility3 = __webpack_require__("RpRB");
                console.log(utility2 + utility3);
                module.exports = "pageC";

                /***/
            }),

        /***/
        "NcBz":
            /***/
            (function(module, exports) {

                module.exports = "utility2";

                /***/
            }),

        /***/
        "RpRB":
            /***/
            (function(module, exports) {

                module.exports = "utility3";

                /***/
            })

    },
    [
        ["8QXy", "pageInit"]
    ]
]);

如果 强制设置了 namedModules:false ,那么 moduleIds:"*",将不会生效 ,
另外moduleIds还有 size, total-size 选项。

以上规则是对于module的,对于chunk,类似有一个 namedChunks/chunkIds 以及选项类同于namedModules/moduleIds,只不过是Chunks是针对于文件来说的,而且不支持hash形式

阅读 1.5k

a

15 声望
0 粉丝
0 条评论
你知道吗?

a

15 声望
0 粉丝
宣传栏