SourceMap是一种映射关系。当项目运行后，如果出现错误，我们可以利用sourceMap反向定位到源码。
const path = require('path');
module.exports = {
devtool: 'none', // SourceMap的模式（见下表）
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 文件名
path: path.resolve(__dirname, 'dist') // 文件夹
}
}
SourceMap不同模式的特点（见下表）
| 模式 | 解释 |
|---|---|
| eval | 每个module会封装到 eval 里包裹起来执行，并且会在末尾追加注释 //@ sourceURL. |
| source-map | 生成一个SourceMap文件（编译速度最慢） |
| hidden-source-map | 和 source-map 一样，但不会在 bundle 末尾追加注释. |
| inline-source-map | 生成一个 DataUrl 形式的 SourceMap 文件. |
| eval-source-map | 每个module会通过eval（)来执行，并且生成一个DataUrl形式的SourceMap. |
| cheap-source-map | 生成一个没有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap） |
| cheap-module-source-map | 生成一个没有列信息（column-mappings）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。 |
1. webpack2.0+； webpack配置 devtool: "source-map" 无效。
sourceMap正确配置如下：
const buildConfig = {
mode: "production",
output: {
path: distPath,
filename: "./js/[name].[hash].min.js",
publicPath: "./"
},
plugins: [
new UglifyJSPlugin({ // 1. 这个配置必须
sourceMap: true
}),
].concat(baseConfig.htmlArray),
devtool: "source-map" // 2. 这个配置必须
}
2. webpack4.0+； webpack配置 devtool: "source-map" 生成的map代码没有 sourcesContent，没有sourcesContent的结果是你只能定位要压缩代码的位置，无法定位到源码的位置
sourceMap 正确配置如下：
const buildConfig = {
mode: "production",
output: {
path: distPath,
filename: "./js/[name].[hash].min.js",
publicPath: "./"
},
optimization: { // 1. 这个配置必须
minimize: false
},
plugins: [
].concat(baseConfig.htmlArray),
devtool: "source-map" // 2. 这个配置必须
}
