Webpack 筆記整理 (一)

基於用 Vue CLI 建構出來的專案底層就是包 Webpack，在使用框架帶給我們的便利性同時，也應該要對這一套工具有一些基本的認識，所以想說要寫個筆記，讓自己有點印象。

為什麼我們需要 Webpack ?

首先先來看一下下面的檔案結構，在這支 HTML 裡面，相依了 4 個 CSS 檔案和 4 個 JavaScript 檔案，在瀏覽器解析這支 HTML 檔案時，只要相依的檔案越多，就會需要發出越多的請求去跟伺服器要這些資源回來該頁面才可以正常顯示，而這些請求會造成用戶端的頁面渲染時間增加，以及伺服器的資源消耗，而最重要的原因就是使用者等的太久，他就不會想看你的網頁 XD。

這個時候 Webpack 就派上用場了，他可以將上面的檔案結構的多支 CSS 檔案以及多支 JavaScript 檔案整合起來，如下圖所示

Webpack 介紹

這一張圖是出自於 Webpack 的官網，我們知道在瀏覽器上他可以運作的檔案類型大致上為 HTML、圖片、JavaScript 、CSS。

但是為了增加開發的效率和降低維護的成本，有額外開發出很多工具，比如說像 pug、ejs 等模板語言或 Sass、less 之類的前置語言，這一些是不能被瀏覽器運行的，而 Webpack 的作用就是可以將這類型的檔案編譯，並打包成瀏覽器可以運行的檔案。