作者：fhkd

webpack基礎用法

核心概念之Entry

Entry用來指定webpack的打包入口。webpack是一個模組打包器，在webpack裡面會把所有的資源（js、css、html、圖片、字型）當成一個個模組，所有這些模組之前會存在依賴關係，因此webpack裡面會從入口檔案（entry指定）開始尋找依賴，依賴又存在其他依賴的檔案，這樣就形成一顆依賴圖，對於非程式碼比如圖片、字型依賴也會不斷加入到依賴圖裡面。

Entry用法

單入口：entry是一個字串（單頁應用）

多入口：entry是一個物件（多頁應用）

核心概念之Output

Output用來告訴webpack如何將編譯後的檔案輸出到磁碟，以及輸出和的檔名稱

output用法：多入口配置

不管是單入口還是多入口，output裡面都是隻有一個，那麼output如何做到輸出不同入口對應的打包檔案，那就是使用佔位符（［name］）確保檔名的唯一

核心概念之Loaders

webpack開箱即用只支援JS和JSON兩種檔案型別，透過Loaders去支援其他檔案型別並且把他們轉化成有效的模組，並且可以新增到依賴圖中。

本身是一個函式，接受原始檔作為引數，返回轉換的結果。

常見的Loaders有哪些？

Loaders的用法

一個webpack配置裡面會存在多個Loader，這些Loader需要存放在module的rules數組裡面

核心概念之Plugins

外掛用於bundle檔案的最佳化，資源管理和環境變數的注入，任何loaders不能做的事情都可以用plugins完成。

Plugins作用於整個構建過程。

常見的plugins有哪些？