sourceMap是用做源码映射,当我们编写代码,webpack帮助我们把代码打包。可当我们写的代码在浏览器运行时报错,这个时候我们需要能够帮助我们定位到源代码哪行错误而不是定位到打包后的代码错误。

devtool配置场景:

开发模式:devtool:’cheap-eval-source-map’
生产模式:devtool:’cheap-source-map’

webapck.config.js

{
	entry:'./src/index.js',
+	devtool:'cheap-eval-source-map'
	...
}

src/index.js

conso.log(111);

运行webpack

yarn run dev

ssl

浏览器会帮助我们定位到源代码哪一行出错。

webpack4.x 教程

webpack 准备工作(1) webpack 手写最基本的配置(2) webpack 打包样式(3) webpack 让打包更便捷(4) webpack 打包图片(5) webpack iconfont打包(6) webpack devServer本地开发(7) webpack 处理ES6语法(8) webpack SourceMap配置(9) webpack Tree Shaking(10) webpack js代码分割(11) webpack 懒加载(12) webpack 打包分析,Preloading,Prefetching(13) webpack 模块化区分开发和生产(14) webpack 样式文件的代码分割(15) webpack 浏览器缓存(16) webpack shimming(17) webpack 环境变量(18) webpack Esline(19)