Appearance

Webpack ​

Webpack是前端打包工具。在其配置文件webpack.config.js中设置devtool即可生成Source Map文件：

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

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

参考链接 ​