前言
工作流算是面試中的常考題了，面試中主要圍繞著搞定復(fù)雜的前端開發(fā)工作流程的幾個工具：vite， webpack，rollup gulp。接下來用通俗一點(diǎn)的方式帶友友認(rèn)識下webpack，簡單來說，Webpack 負(fù)責(zé)將你的源碼及其依賴轉(zhuǎn)換成瀏覽器可以理解的形式，并且將所有文件整合到一個或多個 bundle 中，同時自動處理好 HTML 文件中的腳本引用，使得整個應(yīng)用可以正常運(yùn)行。
一：webpack 與 vite區(qū)別
Webpack
- 更適合大型項目：Webpack 的強(qiáng)大功能和靈活性使其適用于處理復(fù)雜的大型項目。
- 配置復(fù)雜：為了滿足多樣化的需求，Webpack 的配置較為復(fù)雜。
- 構(gòu)建較慢：由于需要對所有資源進(jìn)行打包處理，構(gòu)建速度相對較慢。
- 功能強(qiáng)大：具備豐富的插件生態(tài)系統(tǒng)，能夠處理各種類型的資源和構(gòu)建需求。
Vite
- 更適合中小型項目：Vite 的簡潔配置和快速啟動使其適用于中小型項目的開發(fā)。
- 啟動速度快：Vite 采用按需編譯的方式，無需預(yù)先打包整個應(yīng)用。
- 利用 ES 模塊：直接利用瀏覽器對 ES 模塊的支持，簡化了開發(fā)流程，但在高級特性和插件支持上功能相對有限。
二：Webpack 打包過程概述
讀取入口文件的內(nèi)容,分析入口文件，遞歸的去讀取模塊所依賴的其他文件內(nèi)容，生成 AST 語法樹 ,然后根據(jù) AST 語法樹生成瀏覽器能運(yùn)行的代碼(代碼版本的降級)
2.1. HTTP 服務(wù)器
- 使用
webpack-dev-server 創(chuàng)建一個本地開發(fā)服務(wù)器。 - 配置服務(wù)器監(jiān)聽 5173 端口，并且能夠自動刷新頁面。
- 服務(wù)器會自動識別打包輸出的文件，并在瀏覽器中加載。
2.2. 自動生成 index.html
- 使用
html-webpack-plugin 插件來自動生成 index.html 文件。 - 插件會在
index.html 中自動插入打包后的 JavaScript 文件的引用（如 bundle.js）。 - 這樣可以確保 HTML 文件與生成的 JS 文件正確關(guān)聯(lián)。
2.3. 打包 main.js
Webpack 從 main.js 開始解析應(yīng)用的所有依賴項。- 它會把所有依賴的模塊合并到一個或多個輸出文件（
bundle）中。 - 默認(rèn)情況下，這些文件會被命名為
bundle.js 并放在指定的輸出路徑下。
三：構(gòu)建webpack
3.1:初始化項目
- 新建一個文件夾，因為工作流是一個后端項目，所以可輸入指令
npm init -y初始化為后端項目 - 創(chuàng)建一個
public文件夾，在該文件夾下新建文件index.html - 在
src文件夾下創(chuàng)建main.js文件作為入口文件，隨便寫點(diǎn)輸出，測試效果
3.2:設(shè)置package.json文件
項目從npm run dev 啟動
webpack ：核心包，提供了Webpack的功能。webpack-cli ：個命令行工具，允許運(yùn)行Webpack。webpack-dev-server ：中間件，為開發(fā)提供了快速反饋循環(huán)，具有熱更新能力。html-webpack-plugin ：插件，用于生成一個HTML文件，并將Webpack打包后的JS文件注入到該HTML文件中。@babel/core ：Babel的核心包，Babel是一個編譯器，可以將較新的JavaScript代碼轉(zhuǎn)換成向后兼容的代碼。@babel/preset-env ：預(yù)設(shè)，告訴Babel如何轉(zhuǎn)換你的代碼以支持目標(biāo)環(huán)境。babel-loader ：Webpack加載器，用于將Babel集成到Webpack的工作流程中。
"scripts": {
"dev":"webpack serve --open"
},
"devDependencies": {
"webpack":"^5.36.2",
"webpack-cli":"^4.6.0",
"webpack-dev-server":"^3.11.2",
"html-webpack-plugin":"^5.3.2"，
"@babel/core":"7.15.0",
"@babel/preset-env":"7.15.0",
"babel-loader":"8.2.2"
}
3.3：設(shè)置webpack.config.js文件
webpack 核心概念是通過編寫配置文件實現(xiàn)對項目工程的把控 以下是基于您提供的結(jié)構(gòu)整理的Webpack配置項概述，按照您所要求的格式進(jìn)行排列：
- 入口 (
entry)：定義了應(yīng)用的起點(diǎn)文件，即Webpack從哪個文件開始構(gòu)建依賴圖。常見的入口文件是 main.js 或者其他類似的初始化腳本文件。 - 輸出 (
output)：確定了最終打包文件的名稱以及它們將被放置的位置。例如，bundle.js 會被輸出到 dist 目錄下。
- 模式 (
mode)：設(shè)置為 development 模式可以啟用一些有助于提高開發(fā)體驗的功能，如更詳細(xì)的錯誤堆棧跟蹤、不壓縮代碼等。 - 開發(fā)服務(wù)器 (
devServer)：用于配置開發(fā)環(huán)境中的HTTP服務(wù)器，可以指定服務(wù)器監(jiān)聽的端口、是否啟用熱模塊替換（Hot Module Replacement, HMR）等功能，幫助開發(fā)者更快地迭代開發(fā)工作。
- 加載器與規(guī)則 (
module.rules)：通過一系列規(guī)則定義了Webpack如何處理項目中的不同類型的資源文件。例如，.js 文件可能需要通過 babel-loader 進(jìn)行轉(zhuǎn)譯，而 .css 文件可能需要通過 css-loader 和 style-loader 來加載和應(yīng)用樣式。 - 插件 (
plugins)：Webpack 插件用于執(zhí)行范圍更廣的任務(wù)，如清理舊的構(gòu)建文件、優(yōu)化輸出結(jié)果、注入HTML模板等。一個常見的插件是 HtmlWebpackPlugin，它可以自動生成 HTML 文件并將打包后的 JavaScript 文件自動注入其中。
Babel 幫助開發(fā)者簡化了開發(fā)流程，集中精力于業(yè)務(wù)邏輯而不是兼容性問題
- Babel 是一個 JavaScript 轉(zhuǎn)譯器，可將現(xiàn)代 JS 代碼轉(zhuǎn)換為向后兼容的代碼。
- 允許開發(fā)者使用最新的 JavaScript 語法，而不用擔(dān)心瀏覽器兼容性問題。
- AST (抽象語法樹) : Babel 通過解析源代碼生成 AST，然后基于此樹進(jìn)行轉(zhuǎn)換。
- Presets (預(yù)設(shè)) : 一組 plugins (插件)，告訴 Babel 如何進(jìn)行代碼轉(zhuǎn)換， @babel/preset-env: 根據(jù)目標(biāo)環(huán)境自動選擇需要轉(zhuǎn)換的語法特性。
- 通過
.babelrc 或 babel.config.js 文件指定 presets 和 plugins，可以設(shè)定特定的環(huán)境變量和條件來控制轉(zhuǎn)換行為。 - 可以自動添加 polyfills (對于一些新的 API 方法) 來保證舊環(huán)境下的功能實現(xiàn)。
// commonjs 模塊化
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development', // 開發(fā)階段
entry: './src/main.js',
// 入口文件，沿著入口找到所有依賴模塊，將之打包成一個文件
// 打包成bindle.js
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')//resolve會校驗路徑
},
//模塊車間
module:{
rules:[
{
test:/.js$/,
exclude:/node_modules/,
use:{
loader:'babel-loader',
}
}
]
},
devServer:{
port:8080,
contentBase:path.join(__dirname,'public'),//join拼接路徑
hot:true
},
plugins:[
new HtmlWebpackPlugin({
template:'./public/index.html'
})
]
}
在main.js中輸入進(jìn)行測試
let a = 1
console.log(`${a}`)
使用Babel，需要在根目錄下創(chuàng)建一個名為.babelrc的文件
{
"presets": [
"@babel/preset-env"
]
}
通過上述配置，Webpack 將能夠處理項目的入口文件 main.js 及其依賴，生成一個或多個捆綁包（如 bundle.js），并啟動一個開發(fā)服務(wù)器來服務(wù)于這些文件。同時，通過 HtmlWebpackPlugin 插件自動生成帶有正確腳本引用的 index.html 文件。友友們可以在命令行輸入npm run dev 啟動項目，看看輸出
四：按需配置
4. 1：上線形式打包
- 在
webpack.config.js文件刪去 mode: 'development'
"scripts": {
"build":"webpack --mode production"
},
- 運(yùn)行
npm run build,會發(fā)現(xiàn)自動生成了一個dist文件夾
4.2：引入css
- 在
webpack.config.js文件中的module.rules中添加
{
test:/.css$/,
use:[
'style-loader',
'css-loader'
]
}
test: /.css$/：這是一個正則表達(dá)式，用于匹配所有 .css 文件。
use 數(shù)組：指定了在處理 CSS 文件時使用的 loader。
'style-loader'：將 CSS 插入到 DOM 的 <style> 標(biāo)簽中。'css-loader'：解析 CSS 文件中的 @import 和 url()，并將其處理為 JavaScript 模塊。
"devDependencies": {
"css-loader":"6.0.0",
"style-loader":"3.0.0"
}
3.再簡單設(shè)置一下css文件中的樣式
body{
width: 100%;
height: 100%;
background-color: #d31818;
}
4.在入口文件（main.js）中輸入import './common.css',這告訴 Webpack 處理這個 CSS 文件，并將其打包到最終的 bundle 文件中.npm i 之后就可以利用webpack加載靜態(tài)資源
4.3：使用Vue
- 在
webpack.config.js文件中的module.rules中添加說明，同時引入插件
{
test:/.vue$/,
use:{
loader:'vue-loader'
}
},
{
test:/.styl(us)?$/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
}
test: /.vue$/：匹配所有 .vue 文件。use: { loader: 'vue-loader' }：使用 vue-loader 來處理 .vue 文件。
const { VueLoaderPlugin } = require('vue-loader')
plugins:[
new VueLoaderPlugin()
]
VueLoaderPlugin：這是一個 Vue 專用的 Webpack 插件，它在構(gòu)建過程中處理 Vue 組件。沒有這個插件，vue-loader 將無法正常工作
- 在
package.json文件中說明依賴之后，npm i 安裝依賴
"devDependencies": {
"vue-loader": "^16.2.0",
"stylus-loader": "^8.1.0",
"stylus":"0.63.0"
},
"dependencies": {
"vue": "^3.0.0"
},
3.設(shè)置main.js,與正常使用vue一樣
import './common.css' //webpack/vite加載靜態(tài)資源
import App from './App.vue'
import { createApp } from 'vue'
createApp(App)
.mount('#app')
4.在src下創(chuàng)建App.vue
<template>
<div class="title">
App {{ word }}
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const word = ref('Hello')
onMounted(() => {
setTimeout(() => {
word.value = 'World'
}, 2000)
})
</script>
<style lang="stylus">
.title
font-size 30px
color green
</style>
項目跑起來之后效果如圖
（ps:如果運(yùn)行不起來，報錯配置有問題，嘗試刪除 node_modules 文件夾和 package-lock.json 文件，然后重新安裝依賴）
五：webpack 與 vite區(qū)別
構(gòu)建完webpack之后，相信友友們再次回答這個問題時，會有更深的理解了
- Webpack: 配置文件較為復(fù)雜，核心概念包括
entry (入口點(diǎn))、output (輸出配置)、module (使用 loader 處理各種文件類型) 和 plugins (插件擴(kuò)展功能)。Webpack 的靈活性允許用戶高度定制化其構(gòu)建流程。Webpack 在早期沒有支持 <script type="module">，所有模塊必須通過 Webpack 的模塊依賴系統(tǒng)打包，處理完所有文件后才能運(yùn)行，充當(dāng)了一個全面的打包器 (bundler)。 - Vite: 采用約定大于配置的理念，配置需求極少，旨在簡化開發(fā)過程。Vite 內(nèi)置了現(xiàn)代構(gòu)建工具的最佳實踐，減少了用戶配置的復(fù)雜性。Vite 支持原生 ES6 模塊 (
<script type="module">)，允許懶加載和按需加載模塊。當(dāng)切換路由或引入新功能時，Vite 只會在需要時動態(tài)加載相關(guān)模塊，從而提高了啟動速度。
- Webpack: 作為早期的工作流解決方案，Webpack 在其早期版本中建立了成熟的生態(tài)系統(tǒng)，適用于各種項目需求。它的高度可配置性和插件系統(tǒng)使其適合企業(yè)級應(yīng)用。
- Vite: 由 Vue 3 團(tuán)隊推出，作為 Vue 3 的官方構(gòu)建工具，Vite 更加現(xiàn)代，提供了更快的開發(fā)體驗。Vite 的構(gòu)建流程不需要傳統(tǒng)的打包步驟，通過使用原生 ES6 模塊和支持懶加載，顯著提高了開發(fā)速度和性能。Vite 的缺點(diǎn)是目前只能支持 IE11 及之后版本的瀏覽器。
- Webpack: 在處理大型項目時，Webpack 的構(gòu)建速度可能會變得很慢，特別是在啟動階段，構(gòu)建時間可能需要幾十秒到幾分鐘。隨著項目規(guī)模的增加，性能問題愈加顯著。Webpack 需要將所有文件處理完畢才能運(yùn)行，導(dǎo)致較長的構(gòu)建時間。
- Vite: 通過不需要傳統(tǒng)的打包過程來顯著提高性能。Vite 利用原生 ES6 模塊進(jìn)行即時的模塊熱重載，使啟動速度更快，并且能在切換路由或引入新功能時進(jìn)行按需加載。這樣，Vite 提供了更加流暢的開發(fā)體驗，盡管在支持瀏覽器的范圍上有一定限制。
- Webpack: 擁有廣泛的生態(tài)系統(tǒng)和社區(qū)支持，支持各種插件和加載器，滿足復(fù)雜的配置需求。其成熟的工具鏈和社區(qū)資源使其成為企業(yè)級項目的首選。
- Vite: 盡管較新，但其生態(tài)系統(tǒng)正在迅速發(fā)展，尤其是與 Vue 的緊密集成帶來了良好的體驗。隨著時間的推移，Vite 的生態(tài)系統(tǒng)和社區(qū)也在不斷壯大。
總結(jié)
Webpack 提供了全面的功能和高度的配置能力，適用于各種復(fù)雜的開發(fā)場景，而 Vite 則通過簡化配置和提高性能，提供了更加流暢的開發(fā)體驗，特別適合需要快速反饋的現(xiàn)代前端開發(fā)環(huán)境。Vite 的原生 ES6 模塊支持和按需加載特性進(jìn)一步增強(qiáng)了開發(fā)速度，但目前的瀏覽器支持范圍有所限制。
400 186 1886
