Webpack4 學習筆記 - 05：SourceMap 的配置

SourceMap 是什麼，下面經過例子來演示。

接上回的例子，修改 webpack.config.js，加上一行配置項 devtool: 'none' ：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {},
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new CleanWebpackPlugin(['dist'])
    ],
    mode: 'development',
    devtool: 'none'
}

而後修改 index.js 的內容：

var root = document.getElementById_1('root'); // 故意把getElementById拼寫錯

運行打包，而後查看 index.html 頁面：

頁面報錯了，控制檯顯示錯誤在打包生成的 main.js 的第96行。可是這個提示結果確定不是咱們想要的，在開發階段，我要知道錯誤是在源代碼的哪行，而不是在打包的文件中。怎麼辦呢，這時候就須要用到 SourceMap 了。

把 devtool: 'none' 改爲 devtool: 'source-map'，再運行打包，查看結果：

這時能夠到看，錯誤信息提示在 index.js 文件第一行出錯了， 這就是咱們想要的結果。

SourceMap 實際上是一個映射關係，它知道 mian.js 中的第96行對應的是 index.js 中的第1行。

關於配置 source-map 能夠查看官方文檔： https://www.webpackjs.com/con...，裏面有不少選項，若是不配置 devtool， 則默認就是開啓了。 這裏使用了 source-map ，查看 dist 文件夾，會發現裏面多了一個 main.js.map 文件，裏面的內容就是映射關係。

若是把 devtool: 'source-map' 改成 devtool: 'inline-source-map'，運行打包命令，再看 dist 目錄就會發現 main.js.map 文件沒有了，但在 main.js 文件的最下面，多出了一個很長的 base64 字符串，inline-source-map 會把映射內容以 base64 編碼形式加入到打包生成的 js 文件中去。

把 devtool: 'inline-source-map' 改成 devtool: 'inline-cheap-source-map'，運行打包，能夠看到效果是同樣的，這個 cheap 的意思是，只提示錯誤在源文件的哪一行就好了，不用精確到哪一行哪一列，這樣作有什麼好處呢，好處就是打包的速度會大大提高。

把 devtool: 'inline-cheap-source-map' 改成 devtool: 'inline-cheap-module-source-map'，加了一個 module， 是指不光是咱們寫的代碼，包括第三方模塊的代碼，它都會進行錯誤提示。

把 devtool: 'inline-cheap-module-source-map' 改成 devtool: 'eval', 運行打包，能夠看到在 main.js 中最下面的映射內容也沒有了，取而代之的是以 eval 的方式執行代碼：

這種方式是速度最快的效率最高，沒有生成映射內容，可是若是項目較大，他提示的信息可能會不全。

如何選擇最佳配置選項呢？
若是是開發環境，即 mode: 'development'，用 devtool: 'cheap-module-eval-source-map' 比較好，
若是是生產環境，即 mode: 'production'，用 devtool: 'cheap-module-source-map' 比較好。

最後在看一下官網文檔的一個主意事項：
你能夠直接使用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 來替代使用 devtool 選項，由於它有更多的選項。
切勿同時使用 devtool 選項和 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件。devtool 選項在內部添加過這些插件，因此你最終將應用兩次插件。