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