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类型。