輕鬆經過兩個實例來理解 webpack 中的 devtool: 'source-map' 是什麼意思

正如標題所說，有時候，你在看別人的 webpack.config.js 文件的配置的時候，你會發現他們可能加了這麼一行：

devtool: 'source-map'
複製代碼

從字面上來想象，devtool 好像跟開發有關，source-map 好像跟 源碼 或 地圖 有關，與其去猜，咱們不如經過實例來感覺下它真正的意思。

咱們這節只是入門教程的其中一篇，不從太深刻地角度來理解 source-map 的含義，由於它太複雜了，引用一位大牛的話是這麼說的，看下面的圖片：

下面咱們開始來感覺下 source-map 的魔力。

1. 先不使用 source-map 的狀況

咱們先在 js 裏隨便寫一些錯誤的代碼，也就是說你能夠亂寫一些不存在的方法。

好比下面這樣：

src/app.js

import css from './app.scss';

...

// 這個 sss 方法不存在，是我隨便寫的
sss

import $ from 'jquery';
import './jquery.changeStyle';

...
複製代碼

寫錯代碼很正常啊，關鍵是要懂得如何調試，就是要先找到哪出錯，把它改過來就好。

咱們來找一下哪裏出錯了。

打開瀏覽器的開發者工具，以下：

接着打開上圖中的那個連接，而後：

這樣會一臉懵懂的，由於僅僅定位到編譯後的 app.bundle.js 文件是沒用的，由於仍是找不到源文件，那也就沒法改正錯誤的代碼。

2. 使用 devtool: 'source-map'

那怎麼辦呢？很簡單。

在 webpack.config.js 文件中添加 devtool: 'source-map'，以下所示：

module.exports = {
  entry: {
    ...
  },
  devtool: 'source-map'
}
複製代碼

這樣再來試一下剛纔的調試操做。

接着看下面的圖片：

咱們已經解決了問題，這樣就可以查看哪裏報錯並找到報錯的源文件。

剛纔咱們處理的是 javascript 文件，那 css 文件呢？

咱們來看下。

3. 處理 css 文件

首先，咱們仍是先來寫一些錯的 css 代碼。

src/app.scss

body {
  background: pink;
  p {
    /* xxxx 是故意寫錯的。 */
    color: xxxx;
  }
}
複製代碼

個人 html 頁面是有 p 標籤的，咱們用開發者工具定位到 p 標籤的樣式中，以下圖所示：

從圖中能夠看出，咱們沒法調試 css 代碼，即便用了 devtool: 'source-map' 也沒用。

那怎麼辦呢？

以前咱們是使用下面一些 loader 來處理 css 的。（不懂的，能夠查看之前的章節）

var cssDev = ['style-loader', 'css-loader', 'sass-loader'];
複製代碼

這幾個 loader 恰好都有個選項叫 sourceMap。（這個能夠分別查看他們的官網得知）

咱們把它設爲 true 便可。

咱們把上面的代碼改爲下面這樣：

var cssDev = ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap'];
複製代碼

咱們再來試試效果。

接着，咱們點進去以後，獲得相似下圖所示的狀況。

那這樣，咱們就能夠方便地調試 javascript 和 css 代碼了。

至於 devtool 更深層次的內容請參考它的官方文檔Devtool

如下是一些參考連接：

• webpack sourcemap 選項多種模式的一些解釋
• [webpack] devtool裏的7種SourceMap模式是什麼鬼？

先說這麼多。