webpack 的 sourse-map 中 eval、cheap、inline 和 module 各是什么意思?

Webpack 有非常多的概念,很多名词长得都差不多。我把这些分散在文档和教程里的内容总结起来,写了一份 webpack 中的易混淆知识点,目前看是全网独一份,大家可以加个收藏,方便以后检索和学习。

全集链接 ?? webpack 易混淆知识点

sourse-map ,里面都有个 map 了,肯定是映射的意思。sourse-map 就是一份源码和转换后代码的映射文件。具体的原理内容较多,感兴趣的同学可以自行搜索,我这里就不多言了。

我们先从官网上看看 sourse-map 有多少种类型:

webpack 的 sourse-map 中 eval、cheap、inline 和 module 各是什么意思?

emmmm,13 种,告辞。

如果再仔细看一下,就发现这 13 种大部分都是 evalcheapinlinemodule这 4 个词排列组合的,我做了个简单的表格,比官网上直白多了:

参数参数解释
eval打包后的模块都使用 eval() 执行,行映射可能不准;不产生独立的 map 文件
cheapmap 映射只显示行不显示列,忽略源自 loader 的 source map
inline映射文件以 base64 格式编码,加在 bundle 文件最后,不产生独立的 map 文件
module增加对 loader source map 和第三方模块的映射

还不明白?可以看看 demo。

我们对 webpack 做一些配置,devtool 是专门配置 source-map 的。

......

{
    devtool: ‘source-map‘,
}

......

index.js 文件为了简便,我们只写一行代码,为了得出报错信息,我们故意拼错:

console.lg(‘hello source-map !‘) // log 写成 lg

下面我们试一试常见的几个配置:

5.1 source-map

source-map 是最大而全的,会生成独立 map 文件:

webpack 的 sourse-map 中 eval、cheap、inline 和 module 各是什么意思?

注意下图光标的位置,,source-map 会显示报错的行列信息:

webpack 的 sourse-map 中 eval、cheap、inline 和 module 各是什么意思?

5.2 cheap-sourse-map

cheap,就是廉价的意思,它不会产生列映射,相应的体积会小很多,我们和 sourse-map 的打包结果比一下,只有原来的 1/4 。

webpack 的 sourse-map 中 eval、cheap、inline 和 module 各是什么意思?

5.3 eval-source-map

eval-source-map 会以 eval() 函数打包运行模块,不产生独立的 map 文件,会显示报错的行列信息:

webpack 的 sourse-map 中 eval、cheap、inline 和 module 各是什么意思?

webpack 的 sourse-map 中 eval、cheap、inline 和 module 各是什么意思?

// index.bundle.js 文件

!function(e) {
    // ......
    // 省略不重要的代码
    // ......
}([function(module, exports) {
    eval("console.lg(‘hello source-map !‘);//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi4vc3JjL2luZGV4Mi5qcz9mNmJjIl0sIm5hbWVzIjpbImNvbnNvbGUiLCJsZyJdLCJtYXBwaW5ncyI6IkFBQUFBLE9BQU8sQ0FBQ0MsRUFBUixDQUFXLG9CQUFYIiwiZmlsZSI6IjAuanMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zb2xlLmxnKCdoZWxsbyBzb3VyY2UtbWFwICEnKSJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///0\n")
}
]);

5.4 inline-source-map

映射文件以 base64 格式编码,加在 bundle 文件最后,不产生独立的 map 文件。加入 map 文件后,我们可以明显的看到包体积变大了;

webpack 的 sourse-map 中 eval、cheap、inline 和 module 各是什么意思?

// index.bundle.js 文件

!function(e) {

}([function(e, t) {
    console.lg("hello source-map !")
}
]);
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vd2VicGFjay9ib290c3RyYXAiLCJ3ZWJwYWNrOi8vLy4uL3NyYy9pbmRleDIuanMiXSwibmFtZXMiOlsiaW5zdGFsbGVkTW9kdWxlcyIsIl9fd2VicGFja19yZXF1aXJ......

// base64 太长了,我删了一部分,领会精神

5.5 常用配置:

上面的几个例子都是演示,结合官网推荐和实际经验,常用的配置其实是这几个:

1.source-map

大而全,啥都有,就因为啥都有可能会让 webpack 构建时间变长,看情况使用。

2.cheap-module-eval-source-map

这个一般是开发环境(dev)推荐使用,在构建速度报错提醒上做了比较好的均衡。

3.cheap-module-source-map

一般来说,生产环境是不配 source-map 的,如果想捕捉线上的代码报错,我们可以用这个

写在最后

这篇文章差不多就写到这里了,后面我还会写一些 webapck 打包优化的文章。

从学习 webpack 到这篇输出差不多花了 2 个星期的时间,个人感觉 webpack 说到底,也就是工具链的一环,很多配置内容没必要像 JavaScript 的内置方法一样需要记忆,自己写个大而全的 demo,知道配置项大概能干个啥,要用的时候查一下就行了。

因此我总结了这篇 webpack 易混淆知识点的文章,大家可以点击收藏一下,以后准备面试或者复习的时候,看一下就懂个大概了。




最后推荐一下我的个人公众号:「卤蛋实验室」,平时会分享一些前端技术和数据分析的内容,大家感兴趣的话可以关注一波:


webpack 的 sourse-map 中 eval、cheap、inline 和 module 各是什么意思?

相关推荐