Webpack
Webpack是前端打包工具。在其配置文件webpack.config.js中设置devtool即可生成Source Map文件：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devtool: "source-map"
};
devtool有12种不同取值，分别生成不同类型的Source Map，可以根据需要进行配置。
其中，Fundebug支持上传的Source Map类型有source-map、nosources-source-map与hidden-source-map, cheap-source-map与cheap-module-source-map。它们的特点如下表：
| devtool | names | sourcesCentent | sourceMappingURL |
|---|---|---|---|
| source-map | 有 | 有 | 有 |
| hidden-source-map | 有 | 有 | 无 |
| nosources-source-map | 有 | 无 | 有 |
| cheap-source-map | 无 | 有 | 有 |
| cheap-module-source-map | 无 | 有 | 有 |
- Source Map文件无names属性时，出错位置还原之后的列信息丢失
- Source Map文件无sourcesCentent属性时，出错位置还原之后的源代码丢失
- 源代码中无sourceMappingURL时，Fundebug无法主动下载Source Map文件，则用户必须主动上传Source Map文件。
我们推荐用户选择source-map类型，如果生成的Source Map文件过大时(超过10MB)，则可以选择nosources-source-map类型。