webpack入门学习笔记14 —— Webpack的源码映射

1. 写在前面

Webpack作为一个功能强大的构建工具，能够对我们书写的代码进行打包编译，从而生成一系列新的代码文件，使得项目能够够在浏览器中正常渲染。

Webpack在工作的过程中，会对代码进行打包编译，这就会带来一个问题：如果项目中代码错误，浏览器中的报错提示，定位到的是打包编译后的代码，而不是我们在项目中实际书写的代码，比如以下报错：

对于这种报错，如果是简单的项目还好。但是如果项目稍微复杂一点，开发人员进行调试程序，会变得非常困难。开发人员所期望看到的报错信息是这样的：

如果是这样的报错信息，那么我们就可以快速定位到错误代码的位置，从而快速修复。想要达到这个目的，我们需要这么做呢？这篇博客就和大家分享一下这方面的知识，即webpack中的 源码映射。

2. 配置devtool属性，进行源码映射

配置webpack的源码映射非常简单，直接在 webpack.config.js 文件中指定 devtool 属性即可，下面给出配置的实例：

module.exports = {
    /* 节省篇幅，其余配置已省略 */
    devtool: "eval-source-map",
}

这里将其他的配置规则省略了，如果你想看其他的配置规则，可以查看我的 GitHub仓库 - webpack-learning ,或者通过本文末尾的链接，跳转到我之前的博客中进行查看。

这里简单介绍下这个属性：

• devtool是开发工具，它的作用是生成源代码映射(Source Map)，方便调试
• 源代码映射记录了打包编译后的代码和源代码之间的位置对应关系。它可以让你在控制台查找日志（或错误）来源时，直接跳转到源代码中，而不是打包编译后的代码

该属性常使用的值有以下几个：

• **source-map： **会产生单独的映射文件，控制台中的错误信息会定位到代码错误的文件，并且会定位到这文件的第几行第几列。帮助我们调试源代码。
• **eval-source-map： **不会产生单独的映射文件，但是控制台中的错误信息会定位到代码错误的文件，并且会定位到这文件的第几行第几列。
• **cheap-module-source-map： ** 会产生单独的映射文件，控制台中国的错误信息会定位到代码出错的文件，但是只能定位到第几行出错，不能定位到第几列。
• **cheap-module-eval-source-map： **不会产生单独的映射文件，控制台中国的错误信息会定位到代码出错的文件，但是只能定位到第几行出错，不能定位到第几列。这个模式构件速度适中，而且会生成较好的源代码映射，适合在开发环境中使用 。

3. 写在最后

以上就是这篇博客的全部内容，希望对刚刚接触Webpack的同学有所帮助。

上一篇: webpack入门学习笔记13 —— 使用Webpack打包多页面应用