对于一个 webpack
构建的项目,source-map
对于开发调试,打包速度还是影响很大的,但是 webpack
的官方说明却不那么清晰易懂,也没有找到很精简的说明文章,索性自己尝试下所有的参数,概述一下自己的理解。
有兴趣的同学可以自行创建一个简单的 webpack 项目,切换参数尝试下,会更容易理解
注意尝试的时候,要把webpack mode设置为none, webpack4 mode 为 development和production时会有额外的行为
首先看下官网的那张说明图:
看上去是不是很烦!!其实抽离出其中的关键字,理解每个关键字的做了什么,起到什么作用,剩下的就是彼此间的组合了。
eval => 提升 rebuild 速度
eval
的作用是使得打包后的 bundle
文件中每个模块代码使用 eval
去执行,会保留每个模块的 eval
形式的文件,即便是指定了eval-source-map
,仍然会在浏览器开发者工具中生成 webpack-internals://
文件夹来保存一份里面是eval
形式的模块文件。如图:
猜测这样做的目的:因为 eval
中为字符串形式,所以当源码变动的时候进行字符串处理会提升 rebuild
的速度,所以可以看到图表中所有带有 eval
的选项,rebuild
速度都很快。
因此 eval
的关键字就是 rebuild
source-map => 额…… source-map
这个貌似不需要说明,就是指定了这个关键字才会真正的进行 source-map
生成,生成 .map
文件, 会在 bundle
文件末尾追加 sourceURI=
指定 .map
文件路径,会在浏览器开发者工具中看到webpack://的文件夹
inline => dataURI
正常的source-map
的生成是在dist
目录下创建一个 .map
文件, inline
的含义就是不产生独立的 .map
文件,而把 source-map
的内容以 dataURI
的方式追加到 bundle
件末尾,入股:
至于什么是 dataURI,请自行google ~~
所以 inline
的关键字是 dataURI
cheap => lines-only
cheap
的含义是忽略列信息,可以看到图表中所有带有 cheap
的说明中都有 lines-only
.
忽略列信息的意思就是出了问题只能定位到某一行,不能定位到这行的哪一列, cheap
主要是为了提升打包速度,很好理解嘛,只关注行,不关注列,生成map
的速度肯定快啊~~
所以 cheap
的关键字就是lines-only
module => loader
module
的作用是 map
到 loader
处理前的文件,如果不加 module
, 实际上是 map
到源文件经过对应 loader
处理后的样子。这个需要 loader
的支持
所以 module
的关键字是 loader
最下面的两个选项
hidden-source-map
就是不在 bundle
文件结尾处追加 sourceURL
指定其 sourcemap
文件的位置,但是仍然会生成 sourcemap
文件。这样,浏览器开发者工具就无法应用sourcemap
, 目的是避免把sourcemap
文件发布到生产环境,造成源码泄露。
生产环境应该用错误报告工具结合 sourcemap
文件来查找问题
nosources-source-map
sourcemap
中不带有源码,这样,sourcemap
可以部署到生产环境而不会造成源码泄露,同时一旦出了问题,error stacks
中会显示准确的错误信息,比如发生在哪个源文件的哪一行,如图:
总结
以上所有关键字说明完毕,然后再去看官网的说明,会容易理解的多。什么时候用哪个选相也可以自行思考了。
本文仅从使用的角度来理解 sourcemap
, 想要详细了解 sourcemap
原理的可自行搜索,如阮老师的 JavaScript Source Map 详解
最后附上主要关键字对应方便记忆:
- evel => rebuild
- inline => dataURI
- cheap => lines-only
- module => loader