参考:https://www.jianshu.com/p/d929fe4c62da
什么是source-map
source-map:一种构建了处理前的代码和处理后的代码之间的桥梁的机制。主要是方便开发人员的错误定位。
设置dev-tool
devtool: "source-map"
打开和关闭的区别
关闭source-map后打包,打包后生成bundle.js
打开source-map后,打包后的模块在模块后面会对应引用一个.map文件
,同时在打包好的目录下会针对每一个模块生成相应的.map文件
总结,设置不同属性的区别
source-map 产生.map文件
inline-source-map 不会生成.map文件,source-map以base64形式放到js文件里
cheap cheap报错提示信息只精确到行,不用精确到列,性能更好
module module模式会对三方库、loader等的也负责
eval eval会将每一个module模块,执行eval,执行后不会生成sourcemap文件,仅仅是在每一个模块后,增加sourceURL来关联模块处理前后的对应关系,eval通过eval来执行,性能最快,但是复杂的代码可能显示不全
建议
实际项目中建议这样配置:
- 在dev环境中我们使用:
cheap-module-eval-source-map
- 在prd环境中我们使用:
cheap-module-source-map
配置实例
module.exports = {
devServer: {
//开发环境下设置为编译好以后直接打开浏览器浏览
open: true
},
configureWebpack: config => {
//调试JS
config.devtool = "source-map";
},
css: {
//查看CSS属于哪个css文件
sourceMap: true
}
};