vue-cli3.0版本如何配置webpack中的devtool能够在调试时看到源码

首先vue-cli3.0集合了webpack，不需要像网上很多在config/index.js中设置，根据官方文档，只需要在package.json同级的创建vue.config.js，在里面修改。当然文档所说，vue.config.js里面还有一些虽然是webpackd属性，但还是得直接设置的，这个就可以参考vue.config.js的配置文档。

根据配置文档，不难发现productionSourceMap这个看似是我们需要的属性，其实配置的是在生产环境而非开发环境。不是我们需要的。

而在webpack中实际上也没有这个属性，而是devtool，如下：

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

但是这个属性在文档里没有，因此是选择chainWebpack这个集成的属性进行配置。就可以发现调试器里面webpack://下面的packages里面看到了。

  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'development', // 开发环境
      // config => config.devtool('cheap-source-map') // 转换过的源码-快
      config => config.devtool('source-map') // 源码-慢
    )
  }