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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/5316