[转] Webpack的devtool和source maps

Posted 2020-10-31 前端开发

source maps

Webpack打包生成的.map后缀文件，使得我们的开发调试更加方便，它能帮助我们链接到断点对应的源代码的位置进行调试（//# souceURL），而devtool就是用来指定source-maps的配置方式的。以下是官方文档的说明：

 

source maps

开发工具(Devtool)

此选项控制是否生成，以及如何生成 Source Map。以下是官方文档的配置选项：

 

devtool配置选项

其中一些值适用于开发环境（从表格中各种方式的构建速度来看，可以看出eval方式可大幅提高持续构建效率，这对经常需要边改边调的同学而言非常重要），一些适用于生产环境。对于开发环境，通常希望更快速的 Source Map，需要添加到 bundle 中以增加体积为代价，但是对于生产环境，则希望更精准的 Source Map，需要从 bundle 中分离并独立存在。

 

• 对于开发环境

eval 每个模块都使用 eval() 执行，并且都有 //@ sourceURL。此选项会相当快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码，所以不能正确的显示行数。
inline-source-map - SourceMap 转换为 DataUrl 后添加到 bundle 中。
eval-source-map - 每个模块使用 eval() 执行，并且 SourceMap 转换为 DataUrl 后添加到 eval() 中。初始化 SourceMap 时比较慢，但是会在重构建时提供很快的速度，并且生成实际的文件。行数能够正确映射，因为会映射到原始代码中。
cheap-module-eval-source-map - 就像 eval-source-map，每个模块使用 eval() 执行，并且 SourceMap 转换为 DataUrl 后添加到 eval() 中。"低开销"是因为它没有生成列映射(column map)，只是映射行数。

• 对于生产环境

source-map - 生成完整的 SourceMap，输出为独立文件。由于在 bundle 中添加了引用注释，所以开发工具知道在哪里去找到 SourceMap。
hidden-source-map - 和 source-map 相同，但是没有在 bundle 中添加引用注释。如果你只想要 SourceMap 映射错误报告中的错误堆栈跟踪信息，但不希望将 SourceMap 暴露给浏览器开发工具。
cheap-source-map - 不带列映射(column-map)的 SourceMap，忽略加载的 Source Map。
cheap-module-source-map - 不带列映射(column-map)的 SourceMap，将加载的 Source Map 简化为每行单独映射。
nosources-source-map - 创建一个没有 sourcesContent 的 SourceMap。它可以用来映射客户端（译者注：指浏览器）上的堆栈跟踪，而不会暴露所有的源码。

举例

比如我的vue项目中，在打包生产环境的build.js时，使用的devtool是source-map，打包信息如下：

 

 

生产环境下运行webpack命令

打包后生的的dist目录如下（内含build.js.map文件）：

 

 

打包后生成的dist目录

最原始的source-map实现方式，打包代码的同时生成一个sourcemap文件，并在打包文件的末尾添加//# souceURL，注释会告诉JS引擎原始文件位置

 

生成的build.js

 

推荐方式

开发环境推荐：
cheap-module-eval-source-map
生产环境推荐：
cheap-module-source-map
然而vue-cli脚手架搭建的工程，开发环境使用的是eval-source-map，生产环境用的是source-map。不管怎么说的，其实用起来感觉都差不多。但是，直接将sourceMap放入打包后的文件，会明显增大文件的大小，不利于静态文件的快速加载；而外联.map时，.map文件只会在F12开启时进行下载（sourceMap主要服务于调试），故推荐使用外联.map的形式。

参考链接

http://cheng.logdown.com/posts/2016/03/25/679045

作者：zhangivon
链接：https://www.jianshu.com/p/ad96e712564c
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。