webpack小知识点7-sourceMap

概述sourceMap它是一个映射关系，他知道dist目录下main.js文件xx行实际对应src目录下index.js文件中的第几行 1.配置 2.index.js 3.效果（指出报错信息的源文件） 4.打包结束后dist下 有个main.js.map这里存的是dist/main.js和src/index.js对应映射关系 5.修改配置文件改成 inline-source-map 6.这个时候映射关

sourceMap它是一个映射关系，他知道dist目录下main.Js文件xx行实际对应src目录下index.Js文件中的第几行

1.配置

2.index.Js

3.效果（指出报错信息的源文件）

4.打包结束后dist下 有个main.Js.map这里存的是dist/main.Js和src/index.Js对应映射关系

5.修改配置文件改成 inline-source-map

6.这个时候映射关系在main.Js里面

ps:上面的devtool还有 cheap-inline-source-map(cheap会提示报错在哪一行，不会精确到哪一列，没有加cheap会精确到哪一列 这样打包速度会很慢，cheap还有一点只打包业务代码) cheap-module-inline-source-map(可以打包源文件 向我们引入的第三方文件)

devtool:‘eval‘是打包速度最快 但是提示比较少 

推荐生产环境 

mode: "development",

devtool: ‘cheap-module-eval-source-map‘,

推荐线上环境

mode: "production",

devtool: ‘cheap-module-source-map‘,

具体请参考webpack文档说明。如有错误，欢迎指导。

ps的ps。可以查看一下sourceMap的工作原理

总结

以上是内存溢出为你收集整理的webpack小知识点7-sourceMap全部内容，希望文章能够帮你解决webpack小知识点7-sourceMap所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。