Webpack

Webpack是前端打包工具。在其配置文件webpack.config.js中設(shè)置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，可以根據(jù)需要進(jìn)行配置。

其中，F(xiàn)undebug支持上傳的Source Map類型有source-map、nosources-source-map與hidden-source-map, cheap-source-map與cheap-module-source-map。它們的特點(diǎn)如下表：

• Source Map文件無names屬性時(shí)，出錯(cuò)位置還原之后的列信息丟失
• Source Map文件無sourcesCentent屬性時(shí)，出錯(cuò)位置還原之后的源代碼丟失
• 源代碼中無sourceMappingURL時(shí)，F(xiàn)undebug無法主動(dòng)下載Source Map文件，則用戶必須主動(dòng)上傳Source Map文件。

我們推薦用戶選擇source-map類型，如果生成的Source Map文件過大時(shí)(超過10MB)，則可以選擇nosources-source-map類型。

參考鏈接

• [webpack] devtool配置對(duì)比
• webpack sourcemap 選項(xiàng)多種模式的一些解釋
• Devtool - Webpack Documentation