让 webpack 加载 Source Map

最新推荐文章于 2025-01-14 09:55:32 发布

转载最新推荐文章于 2025-01-14 09:55:32 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/CyLee/p/8327738.html

文章标签：

#webpack #ViewUI

本文介绍了如何在Webpack中配置SourceMap以便于调试编译后的JavaScript代码。通过两种方法实现：一是启动时带上 --devtoolsource-map 参数；二是直接修改Webpack配置文件。这样可以在源代码级别设置断点，提高开发效率。

在浏览器中运行的 JavaScript 代码都是编译器输出的代码，这些代码的可读性很差。如果在开发过程中遇到一个不知道原因的 Bug，则你可能需要通过断点调试去找出问题。在编译器输出的代码上进行断点调试是一件辛苦和不优雅的事情，调试工具可以通过 Source Map 映射代码，让你在源代码上断点调试。

方案一：Webpack 支持生成 Source Map，只需在启动时带上 --devtool source-map 参数。加上参数重启 DevServer 后刷新页面，再打开 Chrome 浏览器的开发者工具，就可在 Sources 栏中看到可调试的源代码了。

方案二：直接在Webpack.config.js 中加入属性 devtool: 'source-map' 即可

转载于:https://www.cnblogs.com/CyLee/p/8327738.html