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。它们的特点如下表：

• Source Map文件无names属性时，出错位置还原之后的列信息丢失
• Source Map文件无sourcesCentent属性时，出错位置还原之后的源代码丢失
• 源代码中无sourceMappingURL时，Fundebug无法主动下载Source Map文件，则用户必须主动上传Source Map文件。

我们推荐用户选择source-map类型，如果生成的Source Map文件过大时(超过10MB)，则可以选择nosources-source-map类型。

参考链接

• [webpack] devtool配置对比
• webpack sourcemap 选项多种模式的一些解释
• Devtool - Webpack Documentation