共计 1851 个字符，预计需要花费 5 分钟才能阅读完成。

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

关于-webpack的-optimizationnamedModules

站内搜索