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 选项在内部添加过这些插件，因此你最终将应用两次插件。