关于webpack使用chainWebpack配置方式配置devtool调试问题

解决方法
为节省时间首先呈上解决方法

使用 configureWebapck 配置 devtool 即可：

module.exports = {
  // xxx,
  configureWebpack: {
    devtool: isDev ? 'eval-source-map' : false,
  },
  // xxx,
}

踩坑历程
我司基于 vue-cli 的项目需要对 sourceMap 进行配置修改（chainWebpack形式修改），但是修改完之后实际项目中并没有见到效果，可见配置失效了

由于官方文档并没有说 chainWebpack 和 configureWebpack 的配置方式会有什么不同，所以就没考虑过 configureWebpack 的形式进行配置

最后无意中看到 vue 项目在 vscode 中调试教程，里面是使用 configureWebpack 配置的，在绝望之中试一下吧，结果就如大家所见，配置生效了

配置调整完成并投入使用之后，我对于这个现象还是很好奇的：以我的理解这两种配置方式应该仅仅就是风格差异，最终对于比如 devtool 字段的配置，无论选择哪一个，效果都是一样的。chainWebapck 失效的原因是什么呢？

下面就为大家揭晓：

图中红线部分就为大家解释了为何 chainWebpack 配置 devtool 失效了：
无论用户使用何等配置，本地启动项目的时候，都会被 vue-cli 给默认修改为 eval-cheap-module-source-map 这个配置

为何使用 configureWebpack 就没有问题呢？

如上图所示，vue-cli 会以 chainWebpack 作为 target，把 configureWebpack 内的配置给 merge 进来。类似于 Object.assign(chainWebpack, configureWebpack)

这样就可以解释了：

使用 chainWebpack 配置 ：会被 vue-cli 直接修改成 eval-cheap-module-source-map，导致 vue.config.js 内的配置没有生效
使用 configureWebpack 配置：chainWebpack 对象内的 devtool 还是被置为默认的 eval-cheap-module-source-map，在后面合并配置的时候，会被 configureWebpack 给覆盖掉，最终生效

最后
sourceMap: eval-cheap-module-source-map 是比较常见的配置，笔者推测由于我司项目结构略有不同，导致该配置的精度无法满足正常 debug，因此使用了相对更消耗性能的配置