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配置前：

扫描二维码关注公众号，回复： 9322086 查看本文章

source-map配置后：