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 文件

根目錄新建一個 public/index.html 默認模板

配置 vue.config.js

result：

loaders

webpack 識別 css、sass 安裝 loader，並將解析後的 css 插入到 index.html 裏面的 style

result：

識別壓縮圖片、字體

webpack 識別圖片、視頻、字體、減小圖片字體等打包的大小。咱們可使用 url-loader 將少於指定大小的文件轉換爲 base64，使用 file-loader 將大於指定大小的文件移動到指定的位置

Babel

Babel 是一個 JavaScript 編譯器，能將 ES6 + 代碼轉爲 ES5 代碼，讓你使用最新的語言特性而不用擔憂兼容性問題，

在 Babel 執行編譯的過程當中，會從項目根目錄下的配置文件讀取配置。在根目錄下建立Babel的配置文件 .babelrc

兼容 vue

• vue-loader
• vue-template-compiler
• vue-style-loader

src文件夾內新建一個APP.vue，內容自定義

熱更新 HMR

配置 package.json

package.json："dev":"webpack serve --config build/vue.config.js"

result：

推薦閱讀

go-zero：開箱即用的微服務框架

實操筆記：爲 NSQ 配置監控服務的心路歷程