其他分享
首页 > 其他分享> > webpack (七) -配置sourceMap——为了更容易地追踪代码错误和警告

webpack (七) -配置sourceMap——为了更容易地追踪代码错误和警告

作者:互联网

14-webpack-sourceMap——为了更容易地追踪代码错误和警告

项目打包后,dist解析的代码位置相较于源代码会发生变化

为了更容易地追踪错误和警告,JavaScript 提供了 source map 功能,将编译后的代码映射回原始源代码。如果一个错误来自于 b.js,source map 就会明确的告诉你。——功能:会记录代码打包后,所在源代码中的位置;发生错误时,会准确显示在第几行

webpack官网—>中文文档—>指南—>开发—>使用source map

https://www.webpackjs.com/guides/development/#使用-source-map

错误冗余代码

在这里插入图片描述

第一步:webpack.config.js中配置文件即可

 //导包
 module.exports = {
    第二步: //插件配置
+  devtool: 'inline-source-map',
    plugins:[
    
    ]
  };

第三步:命令行运行代码,打包

npm run build

打包成功后,打开网页,F12精确显示错误代码具体位置

source-map配置前:

在这里插入图片描述

source-map配置后:

在这里插入图片描述

viceen 发布了74 篇原创文章 · 获赞 1 · 访问量 1294 私信 关注

标签:map,错误,代码,webpack,source,sourceMap,源代码,追踪
来源: https://blog.csdn.net/weixin_44867717/article/details/104439309