webpack打包 productionSourceMap 和 devtool 的区别

前沿

最近看webpack有个疑惑：productionSourceMap和devtool这两个属性功能貌似一样，都是解决生产环境报错定位困难的问题

查了一些资料
1.devtool

devtool:他是webpack的属性，在webpack文档中能找到https://v4.webpack.docschina.org/configuration/devtool/#root

下面是他的一些选项，根据实际情况例如生产环境不想暴露源码可以选择对应的值，文档中说的也是比较清楚的。下图他的一些打包性能也是比较清晰。

2.productionSourceMap

productionSourceMap这个属性是源于vue-cli3.0 vue。config.js中的配置属性。vue已经封装好了 文档地址：https://cli.vuejs.org/zh/config/#productionsourcemap

这个属性其实就是vue对webpack中devtool的一个封装，用true false来控制是否产生 source map

之前看公司的项目vue-cli2都设置了这两个属性，其实productionSourceMap是没用的，最终还是要设置webpack的devtool这个属性