如何让webpack能够生成sourcemap，从而方便调试呢

Question

最近了解到有了sourcemap结合chrome可以快速定位到错误，这样可以方便调试。不知道webpack在配置的时候需要写什么才可以做到

Answer 1

添加一下代码即可生成map文件

evtool: 'cheap-source-map',

参考：https://doc.webpack-china.org...

Answer 2

我个人的观点是，首先在开发环境中没必要配置这个选项，因为开发环境不会开启压缩，直接debug source即可。
至于线上其实也没必要，线上debug这种情况概率很小，如果有bug一般也是在开发环境中还原触发bug场景，然后debug，编译，重新部署。我在开发中没遇到线上debug的情况，如果想在开发环境做配置，推荐如下：

 devtool: '#source-map'

这种方式映射信息全，至于编译性能问题，一般项目情况下你体会不到这个差异，源文件和映射文件分开，不会造成打包文件过大。其次webpack 官方模板配置也是用这个。

如果你想在开发环境配置推荐如下：

  devtool: '#eval-source-map'

这种方式会提高持续构建效率，并且可以减少网络请求。

如果你想深入了解下，其他还有几种配置方式，具体可以参考下面的链接，介绍的还相对比较详细：

参考一
参考二

如果有疑问，欢迎留言交流。

Answer 3

你值得拥有

Answer 4

module.exports = {
    devtool: "source-map",
    ...
}

这样就方便调试，控制台能很好额现实你需要的位置了，可以有好几种选择，根据下面的网址按你的需求去配置
https://webpack.github.io/doc...官网
也有别人的解释
https://segmentfault.com/a/11...