在前端开发中，Webpack 是一个常用的打包工具。但是默认情况下，Webpack 生成的代码无法被浏览器直接调试。本文将介绍如何配置 Webpack，以允许开发者在浏览器中方便地调试代码。
Source Map
在配置 Webpack 允许浏览器调试之前，我们需要了解一下 Source Map 的概念。Source Map 是一种映射关系，它可以将编译后的代码映射回原始的源代码。使用 Source Map 可以在浏览器中直接调试原始的源代码，而不需要手动从编译后的代码中寻找错误。
Webpack 支持多种类型的 Source Map。其中比较常用的有 eval-source-map、source-map 和 cheap-module-eval-source-map 等。
eval-source-map：每个模块使用 eval() 执行，并且 Source Map 转换为 DataUrl 后添加到 eval() 中。source-map：生成独立的 Source Map 文件，与打包后的文件分开存放。cheap-module-eval-source-map：和eval-source-map类似，但是只生成行对应的 Source Map，不包含列信息和 loader 的 sourcemap。
具体使用哪种类型的 Source Map 取决于项目的需求和性能要求。
Devtool 配置
在 Webpack 的配置文件中可以通过 devtool 字段来指定使用哪种类型的 Source Map。
module.exports = {
// ...
devtool: 'source-map',
// ...
}除了 source-map，其他类型的 Source Map 在性能和质量方面都有一定的差异。不同类型的 Source Map 适用于不同的场景，开发者需要根据具体项目需求进行选择。
DevServer 配置
在开发阶段，通常会使用 Webpack DevServer 进行代码的热更新和自动刷新。为了让 DevServer 支持 Source Map，我们需要在配置文件中添加以下选项：
-- -------------------- ---- -------
-------------- - -
-- ---
---------- -
-- ---
-------- -------------
-- ---
--
-- ---
-这样配置之后，DevServer 就可以自动加载 Source Map，并将其映射到源代码中。如果需要在浏览器中调试代码，则只需要打开 DevTools，就可以看到原始的源代码和对应的调用栈信息了。
示例代码
下面是一个简单的 Webpack 配置示例，其中包含了支持 Source Map 和 DevServer 的配置。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- -------------------
----- ----------------------- --------
--
-------- -------------
---------- -
------------ ---------
-------- -------------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -----------------
--
--
--
--结论
通过本文的介绍，我们了解了什么是 Source Map，以及如何配置 Webpack 来支持 Source Map。在开发过程中，使用 Source Map 可以帮助我们更方便地调试代码，提高开发效率。当然，在选择 Source Map 的类型和性能上，需要根据具体项目需求进行权衡。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12543