在前端开发中，我们常常需要对代码进行调试以便及时发现和解决问题。在使用 Webpack 进行打包时，我们可以使用 source map 工具来帮助我们更好地进行代码调试。本文将介绍 Webpack 如何使用 source map 在代码调试过程中发挥作用。
什么是 source map
首先，我们需要了解 source map 是什么。简单地说，source map 就是一个映射文件，它能够将打包后的代码映射回到原始的源代码中去。当浏览器执行打包后的代码时，source map 会告诉浏览器对应的行号和列号，从而方便我们在开发过程中进行代码调试。
Webpack 如何开启 source map
默认情况下，Webpack 并不会开启 source map 功能。我们需要进行相关的配置，才能让 Webpack 生成对应的 source map 文件。
在 Webpack 的配置文件中，通过配置 devtool 属性来开启 source map 功能。devtool 属性有多种取值，在这里我们介绍最常用的几种。
// webpack.config.js
module.exports = {
devtool: 'inline-source-map' // 开启 source map
}source-map
该选项会生成一个外部的 source map 文件，并将原始的源代码映射到生成的代码中。这种方式生成的 source map 文件可以帮助我们在生产环境中进行代码调试，但是会增加打包后的文件体积。
inline-source-map
该选项会将 source map 信息以数据 URL 的形式嵌入生成的 js 文件中。这种方式可以避免生成额外的文件，但会使打包后的 js 文件体积变大。
cheap-module-source-map
该选项会生成一个外部的 source map 文件，并忽略源代码中的列信息。这种方式生成的 source map 文件相比于 source-map 选项，可以大大减小生成的文件体积。但是由于忽略了列信息，所以在调试时可能需要在行号范围内进行查找。
eval-source-map
该选项会将 source map 信息以 eval 的形式嵌入生成的 js 文件中。这种方式需要注意的是，由于 source map 的信息嵌入在 js 文件中，所以当 js 文件被修改时，source map 也会随之发生变化。在开启 HMR（Hot Module Replacement）功能时，该选项是最佳的选择。
如何在调试工具中查看 source map
在开启了 source map 功能的情况下，我们可以在调试工具中查看源代码并进行调试。
以 Chrome 浏览器为例，我们可以在 Sources 面板中找到我们的源代码，并使用调试工具进行断点调试。
示例代码
下面是一个简单的 Webpack 配置文件，在该配置文件中我们开启了 inline-source-map 选项，使生成的 js 文件中包含 source map 信息。
// javascriptcn.com 代码示例
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
devtool: 'inline-source-map'
}在下面的示例代码中，我们将获取一个数列的最大值封装为模块，并在 index.js 中进行调用。如果该模块出现了问题，我们可以使用 source map 来方便地进行代码调试。
// javascriptcn.com 代码示例
// max.js
module.exports = function(arr) {
if (!Array.isArray(arr)) {
throw new Error('Expecting an array of numbers');
}
var max = Number.MIN_SAFE_INTEGER;
for (var i = 0; i < arr.length; i++) {
if (typeof arr[i] !== 'number') {
throw new Error('Array elements must be numbers');
}
if (arr[i] > max) {
max = arr[i];
}
}
return max;
}
// index.js
var max = require('./max.js');
var arr = [1, 2, 3, 4, '5'];
console.log(max(arr));上述代码中，我们故意将 arr 数组中的一个元素变为字符串类型，以模拟开发中可能遇到的问题。
当我们在 Chrome 浏览器中打开 index.html 并打开调试工具时，我们可以在 Sources 面板中看到我们的源代码，并使用调试工具进行调试。当程序抛出异常时，我们可以直接查看 source map，定位到源代码中出错的位置。这种方式可以大大提高我们的调试效率。
总结
本文介绍了 Webpack 中如何使用 source map 搭配调试工具进行代码调试的方式。在开发过程中，我们可以根据项目的需要选择合适的 source map 选项配置，以便更好地进行代码调试。同时，我们需要注意使用 add-ons 工具等保证开发过程中的代码质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6547273d7d4982a6eb1857d1