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

什么是 webpack ?

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

模塊化的發展歷程

傳統的

雖然服務端使用起來方便，但是瀏覽器通過網絡請求獲取文件是異步的，所以出現了矛盾。為了解決 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：

總結

以上是生活随笔為你收集整理的webpack 从 0 到 1 构建 vue的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。