Webpack配置之source-map的使用

参考：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
  }
};