WebPack 配置中如何使用 source map 调试？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发过程中，我们经常需要调试 JavaScript 代码。然而，当我们在网页上运行 JavaScript 代码时，往往无法直接看到代码的执行过程，这就给调试带来了很大的困难。为了解决这个问题，我们可以使用 source map 技术，来将编译后的 JavaScript 代码映射回原始的源代码，从而方便我们进行调试。

什么是 source map？

source map 是一种映射文件，它将编译后的 JavaScript 代码映射回原始的源代码。当我们在浏览器中运行 JavaScript 代码时，如果开启了 source map 功能，浏览器就会自动下载对应的 source map 文件，并将编译后的 JavaScript 代码映射回原始的源代码。这样，我们就可以在浏览器中方便地进行调试。

如何在 WebPack 中配置 source map？

在 WebPack 中，我们可以通过配置 devtool 选项来开启 source map 功能。devtool 选项有多种取值，每一种取值都对应一种不同的 source map 实现方式。常用的 devtool 取值有：

eval：使用 eval() 函数来执行代码，并生成一个内联的 source map。
cheap-eval-source-map：生成一个外部的 source map 文件，但是不包含列信息，同时 loader 的 source map 被简化为每行一个映射。
cheap-module-eval-source-map：生成一个外部的 source map 文件，但是不包含列信息，同时 loader 的 source map 被简化为每行一个映射。同时，它会将 module 中的 loader source map 加入到最终的 source map 中。
eval-source-map：生成一个外部的 source map 文件，且每行都映射到原始代码的具体位置，同时 loader 的 source map 被简化为每行一个映射。
cheap-source-map：生成一个外部的 source map 文件，但是不包含列信息，同时 loader 的 source map 被简化为每行一个映射。
cheap-module-source-map：生成一个外部的 source map 文件，但是不包含列信息，同时 loader 的 source map 被简化为每行一个映射。同时，它会将 module 中的 loader source map 加入到最终的 source map 中。
source-map：生成一个外部的 source map 文件，且每行都映射到原始代码的具体位置，同时 loader 的 source map 被简化为每行一个映射。

我们可以根据具体的需求来选择不同的 devtool 取值。一般来说，如果我们需要进行精细的调试，可以选择 source-map 取值；如果我们只需要快速定位问题，可以选择 cheap-source-map 或者 cheap-module-source-map 取值。

下面是一个简单的 WebPack 配置示例，演示了如何开启 source map 功能：

// javascriptcn.com 代码示例
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'cheap-module-source-map',
};

如何在浏览器中使用 source map 进行调试？

当我们在浏览器中运行 JavaScript 代码时，如果开启了 source map 功能，浏览器就会自动下载对应的 source map 文件，并将编译后的 JavaScript 代码映射回原始的源代码。此时，我们就可以在浏览器的开发者工具中方便地进行调试。

下面是一个简单的示例，演示了如何在浏览器中使用 source map 进行调试：

// index.js
function add(a, b) {
  return a + b;
}

console.log(add(1, 2));

// javascriptcn.com 代码示例
// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'cheap-module-source-map',
};

在浏览器中打开 index.html 文件后，我们可以在浏览器的开发者工具中看到如下的输出：

此时，我们可以在开发者工具的 Sources 面板中找到对应的源代码文件，然后在源代码文件中设置断点，就可以方便地进行调试了。

总结

在前端开发过程中，使用 source map 技术可以方便我们进行调试。在 WebPack 中，我们可以通过配置 devtool 选项来开启 source map 功能。在浏览器中，我们可以通过开启 source map 功能，方便地进行调试。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657128d8d2f5e1655d9da9bf