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... ，里面有很多选项，这里使用了 ‘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: 'development' ，用 devtool: 'cheap-module-source-map' 比较好。

最后在看一下官网文档的一个主意事项：

你可以直接使用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 来替代使用 devtool 选项，因为它有更多的选项。

切勿同时使用 devtool 选项和 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件。 devtool 选项在内部添加过这些插件，所以你最终将应用两次插件。