webpack sourcemap配置詳解

一、什麼是sourcemap

sourcemap是一種文件，它存儲了編譯前的代碼與編譯後的代碼之間的映射，主要被用於調試。在webpack中，開啟sourcemap功能可以將編譯後生成的文件映射回源文件，這樣我們在調試時就可以像調試源代碼一樣來調試編譯後的代碼了。

二、sourcemap的添加方式

1、使用devtool參數

module.exports = {
  devtool: 'source-map'
}

使用devtool參數指定sourcemap的生成方式，它有以下幾個選項：

• eval: 使用eval包裹模塊代碼，並在後面添加sourceURL。
• source-map: 生成一個外部的sourcemap文件，和bundle文件同名，但是後綴為.map。
• hidden-source-map: 和source-map類似，但是不會在bundle文件末尾添加註釋。
• inline-source-map: 生成一個只有dataUrl形式的sourcemap文件，和bundle文件在同一個文件中。
• cheap-source-map: 生成一個沒有列信息的sourcemap文件，可以提高構建速度。
• cheap-module-source-map: 生成一個沒有列信息的sourcemap文件，同時loader的sourcemap也被簡化為只包含對應行的信息，可以提高構建速度。

2、使用插件

可以使用webpack的SourceMapDevToolPlugin插件來生成sourcemap，具體配置如下：

const webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.SourceMapDevToolPlugin({
      filename: '[name].js.map',
      exclude: ['vendor.js'] // 排除不需要生成sourcemap的文件
    })
  ]
};

三、sourcemap的優缺點

1、優點

• 可以方便地追蹤到編譯後的代碼對應的源代碼位置，從而實現更快的debug。
• 可以在編寫代碼時找到錯誤的位置，提高代碼編寫的效率。

2、缺點

• sourcemap文件會增加構建時的時間和文件大小。
• sourcemap文件可以暴露源代碼，存在安全風險。

四、常見問題解答

1、如何禁用sourcemap功能

可以在webpack.config.js中設置devtool為false來禁用sourcemap功能：

module.exports = {
  devtool: false
}

2、如何設置sourcemap的輸出路徑

可以在webpack.config.js中設置output.sourceMapFilename來指定sourcemap的輸出路徑：

module.exports = {
  output: {
    filename: '[name].js',
    sourceMapFilename: 'dist/[file].map'
  }
}

3、如何調試webpack打包後的第三方庫

可以使用externals配置來排除第三方庫的打包，並使用devtool指定合適的sourcemap選項進行調試：

module.exports = {
  externals: {
    jquery: 'jQuery'
  },
  devtool: 'source-map'
}

4、如何在本地開發環境中啟用sourcemap

可以使用devServer的devtool選項來啟用sourcemap：

module.exports = {
  devServer: {
    inline: true,
    devtool: 'cheap-module-eval-source-map'
  }
}

五、總結

sourcemap是一種非常實用的調試工具，可以幫助我們更方便地追蹤編譯後的代碼對應的源代碼位置，提高調試效率。在使用sourcemap的同時，也需要注意文件大小和安全風險等問題。