webpack 從 0 到 1 構建 vue

前端領域框架百花齊放，各種優秀框架出現（react，Vue，ag）等等框架。爲了方便開發者快速開發，開發對應的 cli 腳手架，來提高產出。然而初中級的前端工程師對項目裏的 webpack 封裝和配置瞭解的不清楚，就容易導致出問題不知如何解決，甚至不會通過 webpack 去擴展新功能，對 webpack + vue 項目究竟是怎樣搭建起來的感到一臉困惑，下面我們就來解決這個問題，揭開 webpack 構建 vue 的面紗。

什麼是 webpack ?

酷炫動畫的頁面，高度複雜的頁面功能，頁面內容支持預加載(圖片、骨架屏) ，這些高要求導致了項目的增加更多的代碼。代碼的增多，使得由來代碼需要被組織的需求，由此產生了模塊化。

模塊化的發展歷程

傳統的 <script> 標籤，一個標籤加載一個 js 文件。缺點就是全局變量太多，容易出現衝突，另外依賴順序很重要，太多 js 不好管理。後面出現了 node.js，有了 CommonJS 規範（同步的 require 請求），即一個模塊是一個文件，想用誰直接 require 誰，想被誰用，就 module.exports 導出去。

雖然服務端使用起來方便，但是瀏覽器通過網絡請求獲取文件是異步的，所以出現了矛盾。爲了解決 CommonJS 規範的缺陷，AMD 規範（異步的 require 請求）出現了，滿足異步的網絡請求，可以並行加載多個文件 ES6 modules，ES6 中自帶對應的模塊語法 input/exports，靜態分析容易。但瀏覽器支持度不夠，模塊較少。爲此 webpack 出現解決上述遇到的問題。

模塊化的解決方案 - webpack

Webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。在 webpack 中所有的文件都將被當做模塊使用，當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖（dependency graph），其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個bundle 。舉例：把你的項目當做一個整體，通過一個給定的主文件（如：mian.js）, webpack 將這個文件開始找到你項目的所以依賴文件，使用 loaders 或者是 plugins 去處理它們，最後打包成一個（或者多個）瀏覽器可以識別的 JavaScript 文件。

webpack 的優缺點

先來看看 webpack 的 3 個優點：

模塊化打包： 將 css，js，ts，sass 等統一轉換爲瀏覽器可以識別的模式，並按需（壓縮或不壓縮）打包。
webpack-plugin： webpack-plugin 是用來擴展 webpack 功能的插件，用來擴展 webpack 功能，並在整個構建過程中生效，執行相關任務。
按需加載： 代碼中不需要的模塊不被打進包裏，或者按需加載。這是傳統的流程構建工具，如 Gulp、Grunt 等所沒辦法實現的。

也不能忽視它的下列缺點：

傳統技術開發的複雜項目不適用： 一些比如 jquery，requirejs，seajs 等腳本模塊化開發的複雜項目項目，由於打包需求不穩定，webpack 維護成本極高。
侵入性較強： 使用 webpack 的項目，某些高級語法特性需要依賴獨特語法實現，在一定程度上屬於面向 webpack 開發，需要一定的學習成本。
兼容性問題： webpack 一向是面對最新標準，自身的很多特性需要 polyfill 才能向下兼容，甚至有些特性最新瀏覽器還沒有原生兼容，在做開發時候需要注意。

webpack 的構建流程

Webpack 的構建流程是一種事件流機制。整個構建流程可以看成是一個流水線，每個環節負責單一的任務，處理完將進入下一個環節。

Webpack 會在每個環節上發佈事件，供內置的和自定義的插件有機會干預 Webpack 的構建過程，控制 Webpack 的構建結果

初始化參數： 從配置文件和 Shell 語句中讀取與合併參數，得出最終的參數。

開始編譯： 用上一步得到的參數初始化 Compiler 對象，加載所有配置的插件,執行對象的 run 方法開始執行編譯。確定入口：根據配置中的 entry 找出所有的入口文件。

編譯模塊： 從入口文件出發，調用所有配置的 Loader 對模塊進行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到所有入口依賴的文件都經過了本步驟的處理。

完成模塊編譯： 在經過第 4 步使用 Loader 翻譯完所有模塊後，得到了每個模塊被翻譯後的最終內容以及它們之間的依賴關係。

輸出資源： 根據入口和模塊之間的依賴關係,組裝成一個個包含多個模塊的 Chunk，再把每個 Chunk 轉換成一個單獨的文件加入到輸出列表，這步是可以修改輸出內容的最後機會。

輸出完成： 在確定好輸出內容後，根據配置確定輸出的路徑和文件名，把文件內容寫入到文件系統。

熟悉了 webpack 基本的構建流程那下面我們就進行實踐操作構建 vue 項目

webpack 構建vue項目

安裝 webpack

使用版本：webpack5.x

新建 webpack-vue 項目，進入項目根目錄，創建默認的 package.json

安裝 webpack 和 webpack-cli：

webpack - 模塊打包庫
webpack-cli - 命令行工具

新建 src/main.js，裏面隨便寫點 console.log('hello,webpack-vue')

result：

基礎配置

新建一個 build 文件夾，新建一個 vue.config.js

Entry

入口文件，webpack會首先從這裏開始編譯

Output

定義了打包後輸出的位置，以及對應的文件名。[name]是一個佔位符

result：

plugins

當我們構建項目時生成了 main.js 之後，需要一個 HTML 頁面去展示，然後再 HTML 引入 JavaScript，當我們配置打包輸出的 bundle 文件都配置了隨機 hash 值，每次手動插入和下一次更新就特麻煩，最好方法是每次構建完成後自動將新的bundle 打包到 HTML 中並刪除上一次舊的 bunble，所以我們需要 html-webpack-plugin 、clean-webpack-plugin 插件來幫我們自動引入和刪除歷史 bundle 文件