Webpack开发环境调错 - source map

Webpack开发环境使用source map调错介绍

问题：代码被压缩和混淆后，在控制台的调错信息，无法正确定位源代码的位置（行和列）。

source map：可以精确追踪 error 和 warning 在原始代码的位置。

设置：在 webpack.config.js 中配置 devtool 选项，例如设置为inline-source-map。

inline-source-map选项：把源代码的位置信息一起打包在 js 文件内。

注意：source map 仅适用于开发环境，在生产环境中千万不要使用，否则会产生安全隐患。其实混淆的目的也是为了无法让人看到代码的具体信息。

https://www.webpackjs.com/configuration/devtool/#root

示例

示例：不使用source map

准备源码

以开发环境打包

观察出错信息

打开浏览器的控制台，报出错的位置，跟实际代码行的位置对不上：

使用source map

准备源码

配置webpack.config.js

启动开发环境

在浏览器控制台查看出错信息

显示了代码出错的准确位置：

点击显示出错代码行的地方：

跳到了出错代码的准确位置：

下面启动生产环境，看是否能指出出错代码的准确位置（不应该指出准确位置）：

打开输出的html页面，然后运行到浏览器：