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

source maps

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

 
Webpack的devtool和source maps
source maps

开发工具(Devtool)

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

 
Webpack的devtool和source maps
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的devtool和source maps
生产环境下运行webpack命令


打包后生的的dist目录如下(内含build.js.map文件):

 

 
Webpack的devtool和source maps
打包后生成的dist目录

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

 
Webpack的devtool和source maps
生成的build.js

 

推荐方式

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


上一篇:关于webpack4搭建脚手架之必须要懂的devServer

下一篇:关于Vue中v-model 修饰符: .number .trim .lazy埋下的祸根

评论列表
发表评论
称呼
邮箱
网址
验证码(*)
热评文章
相关阅读