参考：https://www.jianshu.com/p/d929fe4c62da

什么是source-map

source-map：一种构建了处理前的代码和处理后的代码之间的桥梁的机制。主要是方便开发人员的错误定位。

设置dev-tool

devtool: "source-map"
1

打开和关闭的区别

关闭source-map后打包，打包后生成bundle.js

打开source-map后，打包后的模块在模块后面会对应引用一个.map文件，同时在打包好的目录下会针对每一个模块生成相应的.map文件

总结，设置不同属性的区别

source-map           产生.map文件
1

inline-source-map    不会生成.map文件，source-map以base64形式放到js文件里
1

cheap                cheap报错提示信息只精确到行，不用精确到列，性能更好
1

module               module模式会对三方库、loader等的也负责
1

eval                 eval会将每一个module模块，执行eval，执行后不会生成sourcemap文件，仅仅是在每一个模块后，增加sourceURL来关联模块处理前后的对应关系，eval通过eval来执行，性能最快，但是复杂的代码可能显示不全
1

建议

实际项目中建议这样配置：

• 在dev环境中我们使用：cheap-module-eval-source-map
• 在prd环境中我们使用：cheap-module-source-map