（二十二）devtool 配置

步骤二十二

优化构建速度-devtool 配置

开发过程中或者打包后的代码都是webpack处理后的代码,如果进行调试肯定希望看到源代码,而不是编译后的代码, source map就是用来做源码映射的,不同的映射模式会明显影响到构建和重新构建的速度, devtool选项就是webpack提供的选择源码映射方式的配置。

devtool的命名规则为 ^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$

关键字	描述
inline	代码内通过 dataUrl 形式引入 SourceMap
hidden	生成 SourceMap 文件,但不使用
eval	eval(...) 形式执行代码,通过 dataUrl 形式引入 SourceMap
nosources	不生成 SourceMap
cheap	只需要定位到行信息,不需要列信息
module	展示源代码中的错误位置

开发环境推荐：eval-cheap-module-source-map

• 本地开发首次打包慢点没关系,因为 eval 缓存的原因, 热更新会很快
• 开发中,我们每行代码不会写的太长,只需要定位到行就行,所以加上 cheap
• 我们希望能够找到源代码的错误,而不是打包后的,所以需要加上 module

1. 修改webpack.dev.js

// webpack.dev.js
module.exports = {
  // ...
  devtool: 'eval-cheap-module-source-map'
}

2. 打包环境推荐：none(就是不配置devtool选项了，不是配置devtool: 'none')

// webpack.prod.js
module.exports = {
  // ...
  // devtool: '', // 不用配置devtool此项
}

• none话调试只能看到编译后的代码,也不会泄露源代码,打包速度也会比较快。
• 只是不方便线上排查问题, 但一般都可以根据报错信息在本地环境很快找出问题所在。