Webpack如何配置sourceMap

前言：在寫這篇文章之前，我必須要吐槽一下webpack了。特別喜歡更新版本，更新就算了，文檔還跟不上。文檔真的讓人迷惑了，大爺的。

背景：由於我正在寫sourceMap反向定位源碼的功能，所以最近需要使用到webpack的source-map配置。因為公司webpack的版本有2.0和4.0的，所以在做sourceMap配置的時候，真的是花費了很大的氣力。無力吐槽，我們看正文吧

      ===============================================================================

　　=  開源項目：前端監控系統  --- 只需要簡單幾步，就可以搭建一套屬於自己的前端監控系統，快試試吧。 =

　　===============================================================================

SourceMap是一種映射關系。當項目運行后，如果出現錯誤，我們可以利用sourceMap反向定位到源碼。

const path = require('path');

module.exports = {
  devtool: 'none', // SourceMap的模式（見下表）
  entry: './src/index.js',  // 入口文件
  output: {
    filename: 'bundle.js',  // 文件名
    path: path.resolve(__dirname, 'dist')  // 文件夾
  }
}

SourceMap不同模式的特點（見下表）

 

模式	解釋
eval	每個module會封裝到 eval 里包裹起來執行，並且會在末尾追加注釋 //@ sourceURL.
source-map	生成一個SourceMap文件（編譯速度最慢）
hidden-source-map	和 source-map 一樣，但不會在 bundle 末尾追加注釋.
inline-source-map	生成一個 DataUrl 形式的 SourceMap 文件.
eval-source-map	每個module會通過eval()來執行，並且生成一個DataUrl形式的SourceMap.
cheap-source-map	生成一個沒有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）
cheap-module-source-map	生成一個沒有列信息（column-mappings）的SourceMaps文件，同時 loader 的 sourcemap 也被簡化為只包含對應行的。

1. webpack2.0+； webpack配置 devtool: "source-map" 無效。

 

　sourceMap正確配置如下：

const buildConfig = {
    mode: "production",
    output: {
        path: distPath,
        filename: "./js/[name].[hash].min.js",
        publicPath: "./"
    },
    plugins: [
        new UglifyJSPlugin({ // 1. 這個配置必須
            sourceMap: true
        }),
    ].concat(baseConfig.htmlArray),
    devtool: "source-map" // 2. 這個配置必須
}

2. webpack4.0+； webpack配置 devtool: "source-map" 生成的map代碼沒有 sourcesContent，沒有sourcesContent的結果是你只能定位要壓縮代碼的位置，無法定位到源碼的位置

   sourceMap 正確配置如下：

const buildConfig = {
    mode: "production",
    output: {
        path: distPath,
        filename: "./js/[name].[hash].min.js",
        publicPath: "./"
    },
    optimization: {    // 1. 這個配置必須
        minimize: false
    },
    plugins: [
    ].concat(baseConfig.htmlArray),
    devtool: "source-map" // 2. 這個配置必須
}