webpack学习之路（七）source map

咱们用webpack打包文件以后，会生成一个编译压缩过的js文件。若是出现问题，这种代码是很难排查问题的，没法定位到源码。这种时候就须要source map。

1.source map

简单说，source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每个位置，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。
-- 《JavaScript Source Map 详解》

《JavaScript Source Map 详解》——阮一峰

2.source map的格式

webpack中提供了不少种source map的格式。 官方地址

3.source map关键字

• eval：使用eval包裹模块代码
• source map：产生.map文件
• cheap：不包含列信息
• inline：将.map做为DataURI嵌入，不单独生成.map文件
• module：包含loader的sourcemap

4.source map的使用

通常来讲，咱们在开发环境使用，线上环境是关闭的。

咱们来跑一下几个经常使用格式的例子。

简单初始化一个项目

.
├── dist
├── package-lock.json
├── package.json
├── src
│   ├── index.js
│   └── style.css
└── webpack.config.js
复制代码

4.1 eval

devtool: 'eval'
复制代码

而后npm run build

咱们能够在打包文件最下面发现这么一行代码，行尾会告诉你源码的位置

4.2 source-map

webpack.config.js咱们设置一下:

devtool: 'source-map'
复制代码

build以后咱们发现，会有两个生成文件

在bundle.js最后一行，会告诉你须要找哪个对应的.map文件

4.3 inline-source-map

webpack.config.js咱们设置一下:

devtool: 'inline-source-map'
复制代码

build以后咱们发现只有一个文件，这是由于加了inline以后不会独立生成.map文件，而是把.map文件以dataURL的方式嵌入到页面里。

在实际开发环境中，使用source-map或者inline-source-map模式debugger，能够直接看到源代码，很是方便。

---

连接文章

webpack学习之路（六）hash/chunkHash/contentHash

webpack学习之路（五）loader初识及经常使用loader介绍

webpack学习之路（四）webpack-hot-middleware实现热更新

webpack学习之路（三）webpack-dev-middleware

webpack学习之路（二）webpack-dev-server实现热更新

webpack学习之路（一）基础配置

I am moving forward.