本小節的知識與 webpack 無關
前端發展到現階段，很多時候都不會直接執行源**，可能需要對源**進行合併、壓縮、轉換(eg:ts轉js)等操作，真正執行的是轉換後的**
這就給除錯帶來了困難，因為當執行發生錯誤的時候，我們更加希望能看到源**中的錯誤，而不是轉換後**的錯誤
jquery壓縮後的**：為了解決這一問題，chrome瀏覽器率先支援了source map，其他瀏覽器紛紛效仿，目前，幾乎所有新版瀏覽器都支援了source map
source map實際上是乙個配置，配置中不僅記錄了所有原始碼內容，還記錄了原始碼和轉換後的**的對應關係
下面是瀏覽器處理source map的原理
最後瀏覽器會請求兩個檔案：執行的檔案 和 原始碼地圖
webpack中的source map
使用webpack 編譯後的**難以除錯，可以通過devtool 配置來優化除錯體驗
webpack.confit.js檔案：
module.exports =
沒有配置devtool：
mode:'development'預設報錯方式是eval()方式，瀏覽器顯示錯誤的時候只顯示eval()裡那一部分
最執行沒有影響，只是給瀏覽器看的，是瀏覽器的一種除錯手段
mode:'production'預設報錯方式是none有錯，直接指到main.js，沒有具體的提示
配置devtool
具體詳見：devtool 配置文件
webpack核心概念
1.manifest webpack中runtime和manifest主要用於管理所有模組的互動，主要是用於連線模組化應用程式的所有代 碼。runtime包含 在模組互動時，連線模組所需的載入和解析邏輯，包括瀏覽器中已載入模組的連線以及懶載入模組的執行連線。管理模組互動的流程 當編譯器 compil...
webpack 核心概念
核心概念 entry 打包的入口 output 打包的輸出 loaders webpack 處理js 之外的東西，就是使用的loaders plugins webpack 其它功能 比如壓縮 分割 等就是通過plugins 來完成的 entry 的入口 某段 的入口，這個入口會說明這段 所有的依賴 ...
webpack核心概念
打包流程的開始需要乙個入口，用於指定webpack的打包起點，webpack會從入口開始處理工程依賴，構建模組 module 之間的依賴關係樹，這些依賴關係模組在打包時被webpack封裝為chunk，隨後webpack會將chunk打包為bundle 資源入口的路徑字首，在配置時要求必須使用絕對路...