webpack@4.32.2研究筆記【03】- devtool

簡介

​ devtool選項用於控制是否須要生成source map，以及如何生成source map。源碼地址

什麼是source map？

​ source map 一個存儲源代碼與編譯代碼對應位置的映射信息文件，它是專門給調試器準備的，它主要用於debug，目前我所知的只有Google Dev Tools 和 Fire Fox Debugger 支持source map。

​ Google Dev Tools 能夠經過如下方式打開JavaScript的source map 和 CSS的source map：

​ source map主要用於將壓縮混淆後的JavaScript代碼和CSS代碼映射到源碼中，方便debug調試。更多關於source map的知識，你們能夠參考阮一峯大神的文章：JavaScript Source Map 詳解

演示

​ 最新的webpack官網中一共有13種devtool可選模式，不一樣的模式打包輸出的代碼和source map以及構建的速度都不同，下面我演示幾種比較經常使用的devtool模式。

eval

​ 表示把每個模塊文件都轉換爲字符串，而且在每個模塊代碼的尾部添加 //# sourceURL=webpack:/// 文件名.js，並使用eval執行。

一、編寫入口文件和依賴代碼

二、編寫webpack配置 & 啓動webpack

const webpack = require('webpack');

// 建立編譯器對象
const compiler = webpack({
  mode: 'development',
  devtool: 'eval'
});

// 啓動webpack
compiler.run((err, stats) => {
  if (err) {
    console.error(err);
    return;
  }
  // 輸出編譯成功信息
  console.log(stats.toString({ colors: true }));
});

webpack運行結果：

打包輸出的main.js文件

​ 從打包出來的main.js文件中咱們能夠發現index.js文件和role.js文件的全部代碼都被轉換成了字符串，使用eval進行執行，代碼的最後面都加上了//# sourceURL 指向原始文件的位置，這種模式並不會輸出map文件。

瀏覽器運行結果：

​ 從瀏覽器的運行結果中，左側多了一個webpack://，其實這個就是//# sourceURL設置值，若是咱們在代碼中修改了這個名字，那麼瀏覽器就會顯示的是另一個名字，若是刪除它，那麼它的源碼映射就會消失。並且它映射到的每個源文件的頭部都會加上一段webpack的代碼，這對於咱們來講並不友好，這種模式我使用的頻率至關少。

cheap-module-source-map

​ 沒有列映射的source map，同時loader的source map也會被簡化爲每行一個映射，這個配置比較適合在開發環境使用，react腳手架開發模式下也是使用這個配置。

一、安裝css-loader

npm i -D css-loader

二、修改webpack配置

三、建立main.css文件

body {
    background-color: greenyellow;
    color: red;
}

四、src/index.js導入main.css

五、運行webpack

source-map

​ source-map 適合在生產環境中使用，它會生成一個源代碼對應的.map文件，這個文件描述的打包後的代碼和源代碼的映射關係。代碼上線時不能把這個文件上傳到線上服務器，能夠把它上傳到一個只能夠內網訪問服務器上，這樣只要你是在公司內網環境內就能夠很方便的進行線上問題定位。

一、將devtool修改source-map

const webpack = require('webpack');

// 建立編譯器對象
const compiler = webpack({
  mode: 'development',
  devtool: 'source-map'
});

// 啓動webpack
compiler.run((err, stats) => {
  if (err) {
    console.error(err);
    return;
  }
  // 輸出編譯成功信息
  console.log(stats.toString({ colors: true }));
});

運行webpack後，能夠看到dist文件夾下會多出一個main.js.map文件，這個就是source map源碼映射文件

二、將main.js.map文件上傳到內網服務器

三、修改sourceMappingURL映射文件的路徑

四、在瀏覽器中運行webpack打包出來的main.js文件

已經成功的跟源碼創建了映射，若是此時我把內網的服務器關掉，看看會發生什麼事情？

能夠發現若是內網服務器關閉了，Google Dev Tools就找不到main.js.map映射文件了，此時瀏覽器就沒有源碼映射了，可是也不會報錯。

nosources-source-map

​ nosources-source-map會生成一個沒有源碼的source map映射，僅僅能夠用來映射瀏覽器上的堆棧跟蹤，而不會暴露源碼，這配置選項也很適用生產環境。例如：當你線上環境的代碼若是出問題了，報錯信息可以告訴我是在哪一個文件的哪一行出現問題了，可是我又不想把個人源碼暴露出去，就可使用這種模式。

第一步：將devtool修改成nosources-source-map

第二步：在role.js文件裏製做一個錯誤

第三步：瀏覽運行

​ 從運行結果能夠發現，報錯信息詳細的描述了是我哪一個源碼文件的第幾行報錯了，可是瀏覽器卻看不到任何的源碼。

錯誤示範：不能同時設置devtool和SourceMapDevToolPlugin

同時設置devtool和SourceMapDevToolPlugin插件

運行webpack：

打開打包出來的main.js文件，能夠看到會同時設置了兩個sourceMappingURL：

這樣會致使source map映射失效：

若是隻設置devtool或者SourceMapDevToolPlugin其中的一個，那麼source map就能夠正常運行了。

總結

​ 可使用 SourceMapDevToolPlugin 插件進行更細粒度的配置。經過 source-map-loader 來處理已有的 source map。

​ ⚠️注意：devtool的默認值爲false，若是傳入的不是webpack的可選參數或者false會致使webpack運行報錯

​ source-map：在生產環境使用，可是必須須要使用SourceMapDevToolPlugin插件進行設置，而且不能使用devtool選項，須要把source-map文件發佈一臺內網服務器，這樣只有開發人員可以看到源碼映射，外網的人是沒法看到的。

​ nosources-source-map：在生產環境使用，這個選項只有堆棧的映射跟蹤，不會暴露源碼，方便錯誤定位。優勢是：不須要創建和部署內網的source map服務器，缺點是：沒法直接線上debug源碼。

​ cheap-module-source-map：在開發環境使用

​ 這是官網上全部devtool的配置說明，感興趣的同窗能夠對每一個選項進行嘗試。