webpack4中的devtool配置

时间:2024-03-15 17:29:31
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 webpack4中的devtool配置 webpack4中的devtool配置
devtool:none webpack4中的devtool配置 webpack4中的devtool配置
  1. mode:production的时候devtool:none是默认关闭的,报错直接指到打包后的压缩文件,没有具体的提示,之所以生产环境下关闭devtool(因为source map的文件一般较大,不仅会导致额外的网络传输,还容易暴露原始代码)
devtool 控制台结果1 控制台结果2
默认是devtool:none webpack4中的devtool配置 webpack4中的devtool配置
随意写一个devtool:source-map webpack4中的devtool配置 webpack4中的devtool配置

devtool的一些常见配置解析

  • devtool:'source-map'

    1. 打包后的文件多一个main_xxxxx.js.map映射文件,并且在main_xxxx.js中以sourceMappingURL=main_xxxxx.js.map引入
      webpack4中的devtool配置
  • devtool:'inline-source-map'

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

webpack4中的devtool配置

  • 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执行。
      webpack4中的devtool配置
  • devtool: "nosources-source-map"

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

    1. modedevelopment推荐使用cheap-module-eval-source-map
  • devtool:'cheap-module-source-map'

    1. modeproduction时候推荐使用cheap-module-source-map

总结:

  • modedevelopment推荐使用cheap-module-eval-source-map

  • modeproduction时候推荐使用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