The use of source-map in Webpack configuration

Reference: https://www.jianshu.com/p/d929fe4c62da

What is a source-map

source-map : A mechanism that builds a bridge between pre-processing code and post-processing code. Mainly to facilitate the developer's error location.

set dev-tool

devtool: "source-map"

The difference between open and close

After closing the source-map, package it, and generate bundle.js after packaging. After

opening the source-map, the packaged module will be referenced in the back of the module .map文件.每一个模块生成相应的.map文件

To sum up, the difference between setting different properties

source-map           产生.map文件

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

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

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

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

Suggest

In the actual project, it is recommended to configure as follows:

• In the dev environment we use:cheap-module-eval-source-map
• In the prd environment we use:cheap-module-source-map

Configuration example

module.exports = {
    
    
  devServer: {
    
    
    //开发环境下设置为编译好以后直接打开浏览器浏览
    open: true
  },
  configureWebpack: config => {
    
    
    //调试JS
    config.devtool = "source-map";
  },
  css: {
    
    
    //查看CSS属于哪个css文件
    sourceMap: true
  }
};