webpack學習筆記(4)--webpack.config.js

devtool參數

這個參數控制是否生成，以及如何生成source map，已經在官網的doc說明總結了。

下表總結了各個參數和使用的狀況

devtool	構建速度	從新構建速度	生產環境	品質（quality）
(none)	+++	+++	yes	打包後的代碼
eval	+++	+++	no	生成後的代碼
cheap-eval-source-map	+	++	no	轉換過的代碼（僅限行）
cheap-module-eval-source-map	o	++	no	原始源代碼（僅限行）
eval-source-map	--	+	no	原是源代碼
cheap-source-map	+	o	yes	轉換過的代碼（僅限行）
cheap-module-source-map	o	-	yes	原是源代碼（僅限行）
inline-cheap-source-map	+	o	no	轉換過的代碼（僅限行）
inline-cheap-module-source-map	o	-	no	原始源代碼（僅限行）
source-map	--	--	yes	原始源代碼
inline-source-map	--	--	no	原是源代碼
hidden-source-map	--	--	yes	原是源代碼
nosources-source-map	--	--	yes	無源代碼內容

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

+++ 很是快速, ++ 快速, + 比較快, o 中等, - 比較慢, -- 慢

有關品質的說明

1. 打包後的代碼 - 將全部生成的代碼視爲一大塊代碼。你看不到相互分離的模塊。
2. 生成後的代碼 - 每一個模塊相互分離，並用模塊名稱進行註釋。能夠看到 webpack 生成的代碼。示例：你會看到相似 var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();，而不是 import {test} from "module"; test();。
3. 轉換過的代碼 - 每一個模塊相互分離，並用模塊名稱進行註釋。能夠看到 webpack 轉換前、loader 轉譯後的代碼。示例：你會看到相似 import {test} from "module"; var A = function(_test) { ... }(test);，而不是 import {test} from "module"; class A extends test {}。
4. 原始源代碼 - 每一個模塊相互分離，並用模塊名稱進行註釋。你會看到轉譯以前的代碼，正如編寫它時。這取決於 loader 支持。
5. 無源代碼內容 - source map 中不包含源代碼內容。瀏覽器一般會嘗試從 web 服務器或文件系統加載源代碼。你必須確保正確設置 output.devtoolModuleFilenameTemplate，以匹配源代碼的 url。
6. （僅限行） - source map 被簡化爲每行一個映射。這一般意味着每一個語句只有一個映射（假設你使用這種方式）。這會妨礙你在語句級別上調試執行，也會妨礙你在每行的一些列上設置斷點。與壓縮後的代碼組合後，映射關係是不可能實現的，由於壓縮工具一般只會輸出一行。

對於開發環境

如下選項很是適合開發環境：

1. eval - 每一個模塊都使用 eval() 執行，而且都有 //@ sourceURL。此選項會很是快地構建。主要缺點是，因爲會映射到轉換後的代碼，而不是映射到原始代碼（沒有從 loader 中獲取 source map），因此不能正確的顯示行數。
2. eval-source-map - 每一個模塊使用 eval() 執行，而且 source map 轉換爲 DataUrl 後添加到 eval() 中。初始化 source map 時比較慢，可是會在從新構建時提供比較快的速度，而且生成實際的文件。行數可以正確映射，由於會映射到原始代碼中。它會生成用於開發環境的最佳品質的 source map。
3. cheap-eval-source-map - 相似 eval-source-map，每一個模塊使用 eval() 執行。這是 "cheap(低開銷)" 的 source map，由於它沒有生成列映射(column mapping)，只是映射行數。它會忽略源自 loader 的 source map，而且僅顯示轉譯後的代碼，就像 eval devtool。
4. cheap-module-eval-source-map - 相似 cheap-eval-source-map，而且，在這種狀況下，源自 loader 的 source map 會獲得更好的處理結果。然而，loader source map 會被簡化爲每行一個映射(mapping)。

對於生產環境

這些選項一般用於生產環境中：

(none)（省略 devtool 選項） - 不生成 source map。這是一個不錯的選擇。

source-map - 整個 source map 做爲一個單獨的文件生成。它爲 bundle 添加了一個引用註釋，以便開發工具知道在哪裏能夠找到它。

你應該將你的服務器配置爲，不容許普通用戶訪問 source map 文件！

 

hidden-source-map - 與 source-map 相同，但不會爲 bundle 添加引用註釋。若是你只想 source map 映射那些源自錯誤報告的錯誤堆棧跟蹤信息，但不想爲瀏覽器開發工具暴露你的 source map，這個選項會頗有用。

你不該將 source map 文件部署到 web 服務器。而是隻將其用於錯誤報告工具。

nosources-source-map - 建立的 source map 不包含 sourcesContent(源代碼內容)。它能夠用來映射客戶端上的堆棧跟蹤，而無須暴露全部的源代碼。你能夠將 source map 文件部署到 web 服務器。

這仍然會暴露反編譯後的文件名和結構，但它不會暴露原始代碼。