webpack4中的devtool配置

webpack4中的devtool配置

为什么有时候需要配置devtool

• devtool配置选项是用来控制是否生成source map，以及如何生成source map

什么是source map

• 它是一个储存源代码和打包代码映射关系信息的文件，专门用于调试和debug

source map作用

• 因为sourceMap是一个映射关系，所以可以把打包后出错的代码位置和源代码对应的代码位置对应，这样我们可以很快定位错误

webpack4关于devtool的默认配置

1. mode:development的时候,默认值devtool:eval

devtool	控制台结果1	控制台结果2
使用默认值devtool:eval
devtool:none

2. mode:production的时候devtool:none是默认关闭的，报错直接指到打包后的压缩文件，没有具体的提示，之所以生产环境下关闭devtool（因为source map的文件一般较大，不仅会导致额外的网络传输，还容易暴露原始代码）

devtool	控制台结果1	控制台结果2
默认是devtool:none
随意写一个devtool:source-map

devtool的一些常见配置解析

• devtool:'source-map'）

  1. 打包后的文件多一个main_xxxxx.js.map映射文件，并且在main_xxxx.js中以sourceMappingURL=main_xxxxx.js.map引入
     

• devtool:'inline-source-map'

  1. inline-使打包后，没有main_xxxxx.js.map映射文件，而是main_xxx.js.map映射文件以base64的字符串被放到打包的main_xxxx.js的底部

• devtool:'cheap-inline-source-map'

  1. cheap-前缀可以提升打包性能，使打包的报错只定位到行，而不是哪一行的哪一个字符
  2. cheap-只管业务代码，不会管引入的第三方模块或者库错误

• devtool:'cheap-module-inline-source-map'

  1. module-既管业务代码，也会管引入的第三方模块或者库错误

• devtool:'eval'

  1. eval打包速度最快，性能最好，但是代码复杂不适合用，打包出来既然没有map文件，也没有base64的字符串
  2. 每一个模块文件都转换为字符串，并且在每一个模块代码的尾部添加 //# sourceURL=webpack:///文件名.js，并使用eval执行。
     

• devtool: "nosources-source-map"

  1. 这个配置也会生成一个map文件，也在main.js中以//# sourceMappingURL=main.js.map引入，但是不会暴露源码
  2. 当你不想暴露自己的源码。但是又想知道代码出错在哪个文件的哪行的时候可以使用这个配置

• devtool:'cheap-module-eval-source-map'

  1. mode是development推荐使用cheap-module-eval-source-map

• devtool:'cheap-module-source-map'

  1. mode是production时候推荐使用cheap-module-source-map

总结：

• mode是development推荐使用cheap-module-eval-source-map

• mode是production时候推荐使用cheap-module-source-map

  原因如下：

  1. **使用 cheap模式可以大幅提高 souremap生成的效率。**大部分情况我们调试并不关心列信息，而且就算 sourcemap没有列，有些浏览器引擎（例如 v8） 也会给出列信息。
  2. **使用 eval 方式可大幅提高持续构建效率。**参考官方文档提供的速度对比表格可以看到 eval模式的编译速度很快。
  3. 使用 module可支持 babel 这种预编译工具（在 webpack里做为 loader使用）。
  4. **使用 eval-source-map 模式可以减少网络请求。**这种模式开启 DataUrl本身包含完整 sourcemap信息，并不需要像 sourceURL那样，浏览器需要发送一个完整请求去获取 sourcemap文件，这会略微提高点效率。而生产环境中则不宜用 eval，这样会让文件变得极大。

以上只是简单地介绍了几个常用的配置，你可以根据项目需要简单组合使用，如果需要看详细的配置可以去webapck官网Devtool