Webpack4 学习笔记 - 05：SourceMap 的配置
SourceMap 是什么，下面通过例子来演示。
接上回的例子，修改 webpack.config.js，加上一行配置项 devtool: 'none' ：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin(['dist'])
],
mode: 'development',
devtool: 'none'
}然后修改 index.js 的内容：
var root = document.getElementById_1('root'); // 故意把getElementById拼写错运行打包，然后查看 index.html 页面：
页面报错了，控制台显示错误在打包生成的 main.js 的第96行。但是这个提示结果肯定不是我们想要的，在开发阶段，我要知道错误是在源代码的哪行，而不是在打包的文件中。怎么办呢，这时候就需要用到 SourceMap 了。
把 devtool: 'none' 改成 devtool: 'source-map'，再运行打包，查看结果：
这时可以到看，错误信息提示在 index.js 文件第一行出错了， 这就是我们想要的结果。
SourceMap 其实是一个映射关系，它知道 mian.js 中的第96行对应的是 index.js 中的第1行。
关于配置 source-map 可以查看官方文档： https://www.webpackjs.com/con...，里面有很多选项，如果不配置 devtool， 则默认就是开启了。 这里使用了 source-map ，查看 dist 文件夹，会发现里面多了一个 main.js.map 文件，里面的内容就是映射关系。
如果把 devtool: 'source-map' 改为 devtool: 'inline-source-map'，运行打包命令，再看 dist 目录就会发现 main.js.map 文件没有了，但在 main.js 文件的最下面，多出了一个很长的 base64 字符串，inline-source-map 会把映射内容以 base64 编码形式加入到打包生成的 js 文件中去。
把 devtool: 'inline-source-map' 改为 devtool: 'inline-cheap-source-map'，运行打包，可以看到效果是一样的，这个 cheap 的意思是，只提示错误在源文件的哪一行就行了，不用精确到哪一行哪一列，这样做有什么好处呢，好处就是打包的速度会大大提升。
把 devtool: 'inline-cheap-source-map' 改为 devtool: 'inline-cheap-module-source-map'，加了一个 module， 是指不光是我们写的代码，包括第三方模块的代码，它都会进行错误提示。
把 devtool: 'inline-cheap-module-source-map' 改为 devtool: 'eval', 运行打包，可以看到在 main.js 中最下面的映射内容也没有了，取而代之的是以 eval 的方式执行代码：
这种方式是速度最快的效率最高，没有生成映射内容，但是如果项目较大，他提示的信息可能会不全。
如何选择最佳配置选项呢？
如果是开发环境，即 mode: 'development'，用 devtool: 'cheap-module-eval-source-map' 比较好，
如果是生产环境，即 mode: 'production'，用 devtool: 'cheap-module-source-map' 比较好。
最后在看一下官网文档的一个主意事项：
你可以直接使用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 来替代使用 devtool 选项，因为它有更多的选项。
切勿同时使用 devtool 选项和 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件。devtool 选项在内部添加过这些插件，所以你最终将应用两次插件。