webpack学习之路（七）source map

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

1.`source map`

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

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

一般来说，我们在开发环境使用，线上环境是关闭的。

我们来跑一下几个常用格式的例子。

简单初始化一个项目

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

devtool: 'eval'

然后npm run build

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

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

devtool: 'source-map'

build之后我们发现，会有两个生成文件

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

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

devtool: 'inline-source-map'

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

在实际开发环境中，使用source-map或者inline-source-map模式debugger，可以直接看到源代码，非常方便。

I am moving forward.