淺談Webpack模組打包工具一

• 2021 年 2 月 6 日
• 筆記

為什麼要使用模組打包工具

1.模組化開發ES Modules存在兼容性問題 打包之後成產階段編譯為ES5 解決兼容性問題

2.模組文件過多 網路請求頻繁  開發階段把散的模組打包成一個模組 解決網路請求頻繁問題

3.支援不同類型的資源模組

對於有兼容問題的程式碼,我們可以通過模組載入器（Loader）編譯轉化，程式碼拆分（按需載入）引入資源模組，比如import css,

打包工具解決的是前端整體的模組化 並不單指 JavaScript模組化，而是指對所有的資源進行模組化

webpack 配置文件

webpack4.0之後的版本支援0配置的情況進行打包,webpack默認打包的入口文件為src/index.js到dist/main.js,很多時候我們都需要

自定義路徑，需要添加webpack的配置文件,在根目錄下創建webpack.config.js,這個文件運行到node環境下,使用commonjs規範，

比如：指定入口文件及出口文件

webpack4新增了工作模式的功能，大大簡化了webpack的複雜程度，針對不同環境的幾組預設問題,如上圖所示的簡單配置中,沒有

指定mode的屬性，wenpack會按照production模式去工作,這對生成環境是很好的,但是沒辦法去閱讀,因為程式碼壓縮編譯過了,

有三種模式

1.development開發模式 優化打包速度，程式碼中會添加一些調試輔助

2.none 模式 webpack運行最原始的打包 不會去做任何額外的處理

3.production模式

可以在配置文件中配置mode屬性

WebPack 資源模組載入

上文中提到過webpack不僅是JS的模組打包工具，也是整個前端工程的模組化打包工具,也就是說我們可以引入前端項目中的任意類

型文件,但是webpack內部默認只會處理JavaScript文件,這時候我們需要配置loader處理對應的文件,下面嘗試下打包css文件(正常開發

中不會以css為入口文件),安裝下這個loader.

yarn add css-loader –dev   //css-loader作用是將我們css文件轉化為js模組

yarn add style-loader –dev //style-loader是將轉化的js模組展示到頁面上

loader是webpack的核心特性,藉助於loader就可以載入任何類型的資源

Webpack 導入資源模組

一般webpack的打包/運行入口是JS文件，因為javascript驅動整個前端應用的業務,然後在JS中以import的方式引入css,圖片，文字等

及一切javaScript所需要的資源，這也是webpack的核心思想,保證所有必須的資源都能打包進去。

Webpack 文件資源載入器及 URL載入器

文件資源載入器:還有一些比較大的我們需要用到file-loader

yarn add file-loader –dev //處理體積比較大的圖片字體等文件 安裝依賴

在說url載入器之前先說下Data Urls是一種特殊的協議,他可以直接用來表示一個文件內容，在訪問url時就不會訪問任何的http請求,達

到減少http請求的效果,所以我們可以以程式碼的形式轉化任何文件,這時候我們需要用到載入器url-loader,

yarn add url-loader –dev //通過url-loader轉化為data url的形式。

url-loader適用於體積比較小的資源，因為體積比較大的資源會造成我們的打包結果非常大，從而影響運行速度，這裡我們只需要把配

置文件中的file-loader，替換成url-loader

針對小文件使用url-loader,嵌入程式碼減少請求次數,針對大文件單獨獲取存放，提高載入速度用file-loader,file-loader和url-loader必須

要同時安裝,雖然配置文件中是url-loader,如圖所示當大於10KB時還是會運行file-loader(這裡啰嗦下…)

Webpack js編譯載入器

把ES2015等js程式碼的新特性編譯成原生js

yarn add babel-loader @babel/preset-env –dev

Webpack 模組載入方式

webpack遵循不同的導出和導入文件的標準,但是建議不要混淆，最好只使用一種標準

CSS中載入其它css的方式 @import url(xxx.css);

載入html的loader 

yarn add html-loader –save

Webpack 核心工作原理

以JS為入口文件,通過require或者import的方式層層依賴 形成一個依賴樹，遞歸依賴樹找到對應的文件，找到對應的loader屬性,找到

模組對應的載入器去載入模組，實現整個項目的打包,loader機制是Webpack的核心。

Webpack 開發一個Loader

首先創建一個.md文件about.md,創建一個markdown-loader.js文件,

由於webpack打包返回的結果必須為js程式碼，要麼makedown解析模組導出結果交給下個模組,繼續處理直到最終導出JS程式碼形式，要

么makedown導出後解析成字元串直接return出去

第一種方案

創建一個解析makedown的解析模組

yarn add marked –dev 安裝解析makedown的模組，打包結果為html字元串

第二種方案

makedown打包結果傳給html-loder

yarn add html-loader –dev html-loader

所以說loader就是一個從輸入到輸出的轉換，對於同一個資源可以依次使用多個Loader