webpack的optimization.namedModules

时间: 2019-08-15阅读: 422标签: webpack

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.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5316

webpack3升级为webpack4的实践

之前尝试过一些在webpack3的基础上做的构建优化,例如引入HappyPack优化构建速度,开启loader缓存和优化包查找路径等等,详情可以查看前端webpack构建优化

让IDE识别webpack的别名alias

许多项目脚手架默认就会把src目录添加一个@别名,项目中实际引入时,虽然可以精简路径,但也带来一个很麻烦的问题:IDE无法识别这些别名,因此导致无法自动完成路径、无法识别引用资源的输出、出现不必要的告警等情况。

最全的webpack.base.config.js文件中文注释

引入utils文件,此处主要用到了assetsPath()方法,用来根据开发模式或生产模式来使用config文件下的相应配置,引入config文件夹下index.js,使用打包或开发配置

Webpack中如何编写一个自定义的loader

Webpack中loader是一个CommonJs风格的函数,接收输入的源码,通过同步或异步的方式替换源码后进行输出。需要注意的是,该导出函数必须使用function,不能使用箭头函数,因为loader编写过程中会经常使用到this访问选项和其他方法。

webpack 中 import css 文件报错: Module build failed...

项目中引入了css文件,配置了 rules 中:在执行 webpack 命令时,发生错误,报错信息:Module build failed (from ./node_modules/css-loader/dist/cjs.js):CssSyntaxError,经查询,是loader顺序不正确导致此问题,修改后如下:

webpack 阶段回顾 之 webpack-dev-server

webpack-dev-server是一个让我们可以模拟线上环境进行项目调试的工具,主要功能有:路径重定向、浏览器中显示编译错误、接口代理 如解决跨域、热更新

《深入浅出webpack》有感

nodejs的出现对于构建工具具有重要的意义,在没有nodejs之前,js只能执行在浏览器环境下,所以意味着对发布前的js文件要进行处理,十分局限,没有打包工具,只能用PHP脚本来处理文件

webpack是什么?

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

为什么要用webpack?

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。模块化,让我们可以把复杂的程序细化为小的文件;

webpack 从入门到放弃

随着前端项目复杂程度越来越高,依赖也越来越多,为了提高项目中代码的可复用性,前端开始提出模块化开发的思路,前端模块化会有以下几个痛点:命名冲突,文件依赖,代码复用

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广