webpack 相關知識總結

複習前端知識的時候將 webpack 的相關知識總結到一塊兒方便查找和參考。從問題點入手，具體某個問題的深刻另作分析。

webpack 的 loader 和 plugin 的區別

• loader是對源碼層面的轉換、webpack 只能識別 js 和 json 文件、其餘字資源文件好比 css、 ts 等則須要 loader 進行轉換，loader 更像是一個翻譯器，將各類類型的語言翻譯成 webpack 能夠識別的類型
• plugin是對 loader 沒法實現的功能的補充、一般有各自獨立的功能，好比熱加載插件，plugin 更像是一個增值套件。提供特定的增值服務。

plugin 能夠自定義打包過程的方式，能夠參加到整個生命流程中

webpack 原理

理解webpack原理，手寫一個100行的webpack - 知乎

1. Webpack 的打包須要配置一個 entry，根據 entry 配置的文件目錄讀取文件的內容
2. 讀取到的內容是字符串，調用 babylon 來生產對應的 ast，ast 中包含依賴的文件
3. 將依賴文件循環調用，生成模塊 id 和依賴路徑的關聯信息，例如

{"1": "./abc.js" }
複製代碼

模擬 commonJs 的加載機制，將代碼翻譯成能夠在瀏覽器裏執行的樣子 require 接收一個模塊 id 而後從以前保存的依賴關聯信息中找到並執行模塊代碼

什麼是 webpack 和 grunt 和 gulp 有什麼不一樣

Webpack 與 grunt 的 gulp 最大的不一樣各自的側重點不一樣 grunt 和 gulp 是側重在流程控制， webpack 側重在打包機制。 其中 webpack 的 loader 和 gulp 的流程控制相似。

bundle、chunk、module

• bundle 是 webpack 打包出來的文件
• chunk 是 webpack 代碼分割出來的代碼塊
• Module 是開發過程當中的模塊

webpack-dev-server 的優勢

在內存中存儲開發環境下打包生成的文件、能夠實現熱更新。

模塊熱加載的原理

1. 啓動本地服務，當瀏覽器發起請求資源的請求時做出響應。
2. webpack-dev-server 啓動服務，與客戶端造成 websocket 長鏈接
3. webpack 監聽本地文件變化，以觸發從新編譯，生成新的 hash 值和編譯後已改動的文件，推送客戶端消息編譯完成。
4. 客戶端對比接收到的消息，一致緩存、不一致發起 ajax 請求和 jsonp 請求來作最新替換。
5. 本地服務，替換存在內存中的文件內容實現實時刷新。

webpack 持久化緩存

Webpack 持久化緩存實踐 - 前端大全 - CSDN博客

• 保證業務靜態資源文件的 hash 值變化，既每次發佈都有惟一的 hash 值

webpack loader 的書寫順序有什麼講究嗎，style-loader必須放在css-loader 以前嗎

• webpack loader 的加載順序採用的是從右到左，是經過函數式編程中的 compose 來實現的，因此在書寫的時候須要按照從右向左的順序來，css-loader 在右，先處理，完成以後再交給 style-loader 處理，順序不能調整

參考文章：

• Webpack 持久化緩存實踐 - 前端大全 - CSDN博客
• 理解webpack原理，手寫一個100行的webpack - 知乎