乐趣区

关于-webpack的-optimizationnamedModules

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 形式

退出移动版