Source Map

生產程式碼與開發程式碼完全不同，如果需要除錯應用的話會非常的麻煩,錯誤資訊無法定位,Soutce Map就會逆向得到原始碼,

須在打包之後的程式碼檔案的末尾位置例如新增//# sourceMappingURL=jquery-3.4.1.min.map欄位即開啟sourceMap我們就

可以除錯Jquery的原始碼了開啟瀏覽器除錯工具的Source模組也可以看到引入的.js檔案，（html引入的.min.js檔案）

Webpack配置Source Map

devtool配置我們開發工程中的輔助工具及與source map相關的一些配置,webpack支援12種sourceMap的格式，每種方式的效率

和效果各不相同，如下圖所示：

下面對其他模式的sourcemap進行模式對比

1.eval模式：可以執行字串中的程式碼eval('console.log(123)') 預設通過在程式碼中新增 //#sourceURL+路徑 的形式定位原始碼檔案這種

模式不會生成sourcemap檔案，這種模式的速度是最快的，但是隻能定位檔名稱,而不知道具體的行列資訊。

2.eval-sourceMap：除了可以定位檔案 還可以定位行和列的資訊,生成了SourceMap。

3.cheap-eval-source-map：定位到行，而沒有列的資訊。

4.cheap-module-eval-source-map 跟上面的cheap-eval-source-map對比多了個module,對比程式碼發現module對應原始碼，跟我們編

寫的原始碼是一摸一樣的,而上面的則是編譯成ES5的程式碼。

綜上所述拼接特點,基本上我們已經可以知道所有的模式了。

5.hidden-source-map：生成了註釋檔案 但是程式碼中並沒有用註釋的方式引入檔案 我們是看不到效果的

6.nosource-source-map 保護原始碼 不允許檢視

Webpack 自動重新整理問題

雖然有webpack-dev-server能給我們解決大部分問題,但是也有的問題顯得比較雞肋,比如輸入文字字型樣式，每次編輯完成之後刷頁

面字型消失 還要重新輸入，Webpack提供了一種不重新整理的前提下，模組也可以及時更新的方法Webpack HMR。

Webpack HMR體驗：模組熱替換 應用執行過程中實時替換某個模組 應用執行狀態不受影響。

webpack HMR已經整合到了webpack-dev-server中 只需要加上 webpack-dev-server --hot,也可以通過配置檔案去開啟由於JS無法像

CSS那樣有條理的覆蓋,所以JS與圖片等無規律的熱更新需要手動配置，webpack沒有一個通用的狀態,除非用到框架，因為框架本身

是一個模板，完整程式碼如下：

&n