webpack 调试备忘录：用 source-map 和 chrome 调试 webpack 打包后的代码

在前端开发中，Webpack 作为一款强大的打包工具，已经成为了不可或缺的技术。但是，在使用 Webpack 打包代码之后，我们如何进行调试呢？本文将介绍使用 source-map 和 Chrome 调试工具来调试 Webpack 打包后的代码。

什么是 source-map？

在 Webpack 中，source-map 是一种文件，用于将编译后的代码映射回原始源代码。使用 source-map，可以轻松地调试 Webpack 打包后的代码，以及查看源代码和编译后的代码之间的差异。

如何配置 source-map？

在 Webpack 配置文件中，可以通过设置 devtool 属性来启用 source-map 的生成。常用的 devtool 选项有以下几种：

• eval：生成的 source-map 会被作为 DataURL 嵌入到 bundle 中，因此不会生成单独的文件。这种方式的速度最快，但是不利于调试。
• source-map：生成一个单独的 source-map 文件，可以帮助我们更好地调试代码。
• cheap-source-map：生成一个不包含列信息的 source-map 文件，可以加快打包速度。
• cheap-module-source-map：生成一个不包含列信息的 source-map 文件，同时会将 loader 的 sourcemap 加入到 bundle 中。

在实际使用中，我们可以根据项目的需要来选择适合的 devtool 配置。

如何使用 Chrome 调试工具？

在生成了 source-map 文件之后，我们可以通过 Chrome 调试工具来进行调试。具体步骤如下：

1. 在 Chrome 中打开调试工具（快捷键为 F12）。
2. 进入 Sources 标签页，找到打包后的代码文件。
3. 点击代码左侧的行号，可以在代码中设置断点。
4. 在页面中触发相应的事件，调试工具就会停在设置的断点处，可以查看变量的值、调用栈等信息。

示例代码

下面是一个简单的 Webpack 配置文件，用于生成包含 source-map 的打包文件：

-- -------------------- ---- -------
----- ---- - ----------------

-------------- - -
  ------ -----------------
  ------- -
    --------- ------------
    ----- ----------------------- -------
  --
  -------- ------------
--

在 Chrome 调试工具中，可以使用以下代码来进行调试：

function add(a, b) {
  return a + b;
}

let result = add(1, 2);
console.log(result);

通过以上配置和代码，我们可以轻松地进行 Webpack 打包后的代码调试。

总结

使用 source-map 和 Chrome 调试工具，可以帮助我们更快地定位和解决代码中的问题。在实际开发中，我们应该根据项目的需要来选择合适的 devtool 配置，并掌握 Chrome 调试工具的基本使用方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6630c080d3423812e4e9fc02