webpack-sourcemap

1、什么是sourcemap

Sourcemap：存储打包前后代码的映射关系，可以定位到错误提示的内容。

2、如何开启sourcemap

https://www.webpackjs.com/configuration/devtool/
在webpack.config.js中添加：

  // 存储打包前后代码的映射关系
  devtool: 'inline-source-map',

各配置项说明:
①　eval:不会单独生成sourcemap文件, 会将映射关系存储到打包的文件中, 并且通过eval存储。
优势: 性能最好；缺点: 业务逻辑比较复杂时候提示信息可能不全面不正确。

②　source-map:会单独生成sourcemap文件, 通过单独文件来存储映射关系
优势: 提示信息全面,可以直接定位到错误代码的行和列；缺点: 打包速度慢。

③　inline:不会单独生成sourcemap文件, 会将映射关系存储到打包的文件中, 并且通过base64字符串形式存储。（webpack5不支持）

④　cheap:生成的映射信息只能定位到错误行不能定位到错误列。（webpack5不支持）

⑤　module:不仅希望存储我们代码的映射关系, 还希望存储第三方模块映射关系, 以便于第三方模块出错时也能更好的排错。（webpack5不支持）

3、企业开发配置

①　development: cheap-module-eval-source-map（webpack5:eval-cheap-module-source-map）
只需要行错误信息, 并且包含第三方模块错误信息, 并且不会生成单独sourcemap文件。

②　production: cheap-module-source-map
只需要行错误信息, 并且包含第三方模块错误信息, 并且会生成单独sourcemap文件。