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-mapnosources-source-maphidden-source-map, cheap-source-mapcheap-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文件过大时(超过5M),则可以选择nosources-source-map类型。

参考链接

results matching ""

    No results matching ""