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. 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

相关文章