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

什么是 webpack ?

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

模塊化的發(fā)展歷程

傳統(tǒng)的

雖然服務(wù)端使用起來方便，但是瀏覽器通過網(wǎng)絡(luò)請(qǐng)求獲取文件是異步的，所以出現(xiàn)了矛盾。為了解決 CommonJS 規(guī)范的缺陷，AMD 規(guī)范（異步的 require 請(qǐng)求）出現(xiàn)了，滿足異步的網(wǎng)絡(luò)請(qǐng)求，可以并行加載多個(gè)文件 ES6 modules，ES6 中自帶對(duì)應(yīng)的模塊語法 input/exports，靜態(tài)分析容易。但瀏覽器支持度不夠，模塊較少。為此 webpack 出現(xiàn)解決上述遇到的問題。

模塊化的解決方案 - webpack

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

webpack 的優(yōu)缺點(diǎn)

先來看看 webpack 的 3 個(gè)優(yōu)點(diǎn)：

• 模塊化打包： 將 css，js，ts，sass 等統(tǒng)一轉(zhuǎn)換為瀏覽器可以識(shí)別的模式，并按需（壓縮或不壓縮）打包。

• webpack-plugin： webpack-plugin 是用來擴(kuò)展 webpack 功能的插件，用來擴(kuò)展 webpack 功能，并在整個(gè)構(gòu)建過程中生效，執(zhí)行相關(guān)任務(wù)。

• 按需加載： 代碼中不需要的模塊不被打進(jìn)包里，或者按需加載。這是傳統(tǒng)的流程構(gòu)建工具，如 Gulp、Grunt 等所沒辦法實(shí)現(xiàn)的。

也不能忽視它的下列缺點(diǎn)：

• 傳統(tǒng)技術(shù)開發(fā)的復(fù)雜項(xiàng)目不適用： 一些比如 jquery，requirejs，seajs 等腳本模塊化開發(fā)的復(fù)雜項(xiàng)目項(xiàng)目，由于打包需求不穩(wěn)定，webpack 維護(hù)成本極高。

• 侵入性較強(qiáng)： 使用 webpack 的項(xiàng)目，某些高級(jí)語法特性需要依賴獨(dú)特語法實(shí)現(xiàn)，在一定程度上屬于面向 webpack 開發(fā)，需要一定的學(xué)習(xí)成本。

• 兼容性問題： webpack 一向是面對(duì)最新標(biāo)準(zhǔn)，自身的很多特性需要 polyfill 才能向下兼容，甚至有些特性最新瀏覽器還沒有原生兼容， 在做開發(fā)時(shí)候需要注意。

webpack 的構(gòu)建流程

Webpack 的構(gòu)建流程是一種事件流機(jī)制。整個(gè)構(gòu)建流程可以看成是一個(gè)流水線，每個(gè)環(huán)節(jié)負(fù)責(zé)單一的任務(wù)，處理完將進(jìn)入下一個(gè)環(huán)節(jié)。

Webpack 會(huì)在每個(gè)環(huán)節(jié)上發(fā)布事件，供內(nèi)置的和自定義的插件有機(jī)會(huì)干預(yù) Webpack 的構(gòu)建過程，控制 Webpack 的構(gòu)建結(jié)果

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

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

編譯模塊： 從入口文件出發(fā)，調(diào)用所有配置的 Loader 對(duì)模塊進(jìn)行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到所有入口依賴的文件都經(jīng)過了本步驟的處理。

完成模塊編譯： 在經(jīng)過第 4 步使用 Loader 翻譯完所有模塊后，得到了每個(gè)模塊被翻譯后的最終內(nèi)容以及它們之間的依賴關(guān)系。

輸出資源： 根據(jù)入口和模塊之間的依賴關(guān)系,組裝成一個(gè)個(gè)包含多個(gè)模塊的 Chunk，再把每個(gè) Chunk 轉(zhuǎn)換成一個(gè)單獨(dú)的文件加入到輸出列表，這步是可以修改輸出內(nèi)容的最后機(jī)會(huì)。

輸出完成： 在確定好輸出內(nèi)容后，根據(jù)配置確定輸出的路徑和文件名，把文件內(nèi)容寫入到文件系統(tǒng)。

熟悉了 webpack 基本的構(gòu)建流程那下面我們就進(jìn)行實(shí)踐操作構(gòu)建 vue 項(xiàng)目

webpack 構(gòu)建vue項(xiàng)目

安裝 webpack

使用版本：webpack5.x

新建 webpack-vue 項(xiàng)目，進(jìn)入項(xiàng)目根目錄，創(chuàng)建默認(rèn)的 package.json

安裝 webpack 和 webpack-cli：

• webpack - 模塊打包庫

• webpack-cli - 命令行工具

新建 src/main.js，里面隨便寫點(diǎn) console.log(‘hello,webpack-vue’)

result：

基礎(chǔ)配置

新建一個(gè) build 文件夾，新建一個(gè) vue.config.js

Entry

入口文件，webpack會(huì)首先從這里開始編譯

Output

定義了打包后輸出的位置，以及對(duì)應(yīng)的文件名。[name]是一個(gè)占位符

result：

plugins

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

根目錄新建一個(gè) public/index.html 默認(rèn)模板

配置 vue.config.js

result：

loaders

webpack 識(shí)別 css、sass 安裝 loader，并將解析后的 css 插入到 index.html 里面的 style

result：

識(shí)別壓縮圖片、字體

webpack 識(shí)別圖片、視頻、字體、減少圖片字體等打包的大小。我們可以使用 url-loader 將少于指定大小的文件轉(zhuǎn)換為 base64，使用 file-loader 將大于指定大小的文件移動(dòng)到指定的位置

Babel

Babel 是一個(gè) JavaScript 編譯器，能將 ES6 + 代碼轉(zhuǎn)為 ES5 代碼，讓你使用最新的語言特性而不用擔(dān)心兼容性問題，

在 Babel 執(zhí)行編譯的過程中，會(huì)從項(xiàng)目根目錄下的配置文件讀取配置。在根目錄下創(chuàng)建Babel的配置文件 .babelrc

兼容 vue

• vue-loader

• vue-template-compiler

• vue-style-loader

src文件夾內(nèi)新建一個(gè)APP.vue，內(nèi)容自定義

熱更新 HMR

配置 package.json

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

result：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。