webpack devtool篇

站长

2023年10月04日 23:23 · 阅读数 75

前言

devtool用作调试，在找错误方面给了我们很大的帮助，然而官网的devtool有十几种配置，用的多一点的也有七种，那么每一种代表的是什么，我们需要弄清楚，经过查阅了一些资料之后以及自己的实践，自己的总结如下

官网配置说明

webpack devtool篇

看到了上面这些配置，自己和参考文章的作者最开始状态一样不知所云，首先右边的配置不知道有什么区别，然后不知道后面（仅限行是什么意思），后来经过网上查询收集突然明白了，下面是总结结果，这些名词解释很大一部分来自于参考文章，有兴趣的可以自己看看

揭秘配置

关键字

eval，source-map，cheap，module 最常见关键字就是这几个，很多配置就是这几个组合起来的，那么这几个关键字是什么意思，我们一一解释

eval:

这个关键词表示每个模块用eval执行，并且存在@sourceUrl，就是说这种配置的devtool在打包的时候，生成的bundle.js文件模块都会被eval包裹，并且后面跟着sourceUrl,指向的是原文件index.js，调试的时候就是根据这个sourceUrl找到的index.js文件的。

source-map:

这种配置会生成一个带有.map文件，这个map文件会和原始文件做一个映射，调试的时候，就是通过这个.map文件去定位原来的代码位置

cheap:

这个意思是说低消耗打包，什么叫低消耗？就是打包的时候map文件不会保存原始代码的列位置信息，只包含行位置信息，所以这就解释官网图后面的说明(仅限行)，可能这样说还有点不理解我们看看两张图就知道了. 第一张是设置devtool: 'source-map'的结果 webpack devtool篇可以看到，第一张图这个光标不仅在第四行，而且还在第13列

第二张devtool:'cheap-source-map' webpack devtool篇可以清楚的看到，这次只有行数，光标总是在最前面，因为没有保存列数

module

包含loader的sourcMap(比如jsx to js, babel的sourceMap)

各个配置项目打包结果

我们这次把各个配置项目都打包一次，看看结果，这是参考文章没有的部分

eval

output代码结果

webpack devtool篇

线上调试代码结果

webpack devtool篇

打包结果

webpack devtool篇

说明

1: 首先按照eval关键字的配置说明，他会在output的bundle.js里面加入eval模块，包裹代码，并且末尾是sourceURL用来定位原始文件，上面也可以看到后面跟着是// ./index.js的

2：eval 从打包结果来看并不生成.map文件，打包出来的大小是350kB

3： webpack devtool篇

官网说这个模式下的调试文件是生成后的结果，也就是转换后的结果，从线上调试代码结果来看确实这这样的（我的函数是用箭头函数写的）

4: 从线上结果来看，确实光标有列信息

eval-source-map

output代码结果

webpack devtool篇

线上结果

webpack devtool篇

打包结果

webpack devtool篇

说明

1: 第一条和上面一样，但是这里不一样的地方是eval和source-map一起用了，产生的结果是并没有一个map文件，而是在文件里面除了一个sourceURL还有一个surceMappingURL(这个模式比较特殊), 这个后面跟着的是map文件的base64码，他不是生成map文件，而是把map文件内容变成base64，插入到bundle.js文件中,

2: 从打包结果来看，没有map文件，原因解释了, 打包出来的大小是874kB

3: webpack devtool篇