什么是Webpack?
定義
? ? ? ? 本質(zhì)上,Webpack是用于現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊打包工具.當(dāng)webpack處理應(yīng)用程序時,它會在內(nèi)部從一個或多個入口點(diǎn)構(gòu)建一個依賴圖(dependency graph),然后將你項(xiàng)目中所需的每一個模塊組合成一個或多個bundles,它們均為靜態(tài)資源,用于展示你的內(nèi)容.
靜態(tài)模塊:指的是編寫代碼過程中的,html,css,js,圖片等固定內(nèi)容的文件
打包:把靜態(tài)模塊內(nèi)容,壓縮,整合,轉(zhuǎn)譯等(前端工程化)
- 把less/sass轉(zhuǎn)成css代碼
- 把ES6+降級成ES5
- 支持多種模塊標(biāo)準(zhǔn)語法
為什么學(xué)習(xí)Webpack
很多項(xiàng)目基于Webpack構(gòu)建,并為Vue React腳手架使用做鋪墊
使用Webpack
需求:封裝utils包,校驗(yàn)手機(jī)號長度和驗(yàn)證碼長度,在src/index.js中使用并打包觀察
步驟:
? ? ? ? 1.新建并初始化項(xiàng)目,編寫業(yè)務(wù)源代碼
? ? ? ? 2.下載webpack webpack-cli到當(dāng)前項(xiàng)目中(版本獨(dú)立),并配置局部自定義命令
在終端中使用npm下載webpack
在package.json中配置webpack
使用webpack
修改Webpack打包入口和出口
Webpack配置:影響Webpack打包過程和結(jié)果
步驟:
? ? ? ? 1.項(xiàng)目根目錄,新建webpack.config.js配置文件
? ? ? ? 2.導(dǎo)出配置對象,配置入口,出口文件的路徑
entry配置入口
putput配置出口
? ? ? ? 3.重新打包觀察
注意:只有和入口產(chǎn)生直接/間接的引入關(guān)系,才會被打包
案例:用戶登錄-長度判斷
需求:點(diǎn)擊登錄按鈕,判斷手機(jī)號和驗(yàn)證碼長度
步驟:
? ? ? ? 1.準(zhǔn)備用戶登錄頁面
? ? ? ? 2.編寫核心js邏輯代碼
? ? ? ? 3.打包并手動復(fù)制網(wǎng)頁到dist下,引入打包后的js,運(yùn)行
核心:
? ? ? ? Webpack打包后的代碼,作用在前端網(wǎng)頁中使用
自動生成html文件
插件html-webpack-plugin:在Webpack打包時生成html文件
步驟:
1.下載html-webpack-plugin本地軟件包
2.配置webpack.comfig.js讓W(xué)epack擁有插件功能
3.重新打包觀察效果
打包c(diǎn)ss代碼
? ? ? ? 加載器 css-loader:解析css代碼
? ? ? ? 加載器style-loader:把解析后的css代碼插入到DOM
? ? ? ? 注意:Webpack默認(rèn)只識別js代碼
步驟:
? ? ? ? 1.準(zhǔn)備css文件代碼引入到src/login/index.js中(壓縮轉(zhuǎn)譯處理等)
? ? ? ? 2.下載css-loader和style-loader本地軟件包
? ? ? ? 3.配置webpack.config.js讓W(xué)ebpack擁有該加載器功能
? ? ? ? 4.打包后觀察效果
優(yōu)化-提取css代碼
插件mini-css-extract-plugin:提取css代碼
注意:不能和style-loader一起使用
好處:css文件可以被瀏覽器緩存,減少js文件體積
步驟:
? ? ? ? 1.下載mini-css-extract-plugin本地軟件包
? ? ? ? 2.配置webpack.config.js讓W(xué)ebpack擁有該插件功能
? ? ? ? 3.打包后觀察效果
優(yōu)化-壓縮過程
問題:css代碼提取后沒有壓縮
解決:使用css-minimizer-webpack-plugin插件
步驟:
? ? ? ? 1.下載css-minimizer-webpack-plugin本地軟件包
? ? ? ? 2.配置webpack.config.js讓webpack擁有該功能
? ? ? ? 3.打包重新觀察
打包less代碼
加載器less-loader:把less代碼編譯為css代碼
步驟:
? ? ? ? 1.新建less代碼(設(shè)置背景圖)并引入到src/login/index.js中
? ? ? ? 2.下載less和less-loader本地軟件包
注意:less-loader需要搭配less軟件包使用
? ? ? ? 3.配置webpack.config.js讓W(xué)ebpack擁有功能
打包圖片
資源模塊:Webpack5內(nèi)置資源模塊(字體,圖片等)打包,無需額外loader
步驟:
? ? ? ? 1.配置webpack.comfig.js讓W(xué)ebpack擁有打包圖片功能
? ? ? ? 占位符[hash]對模塊內(nèi)容做算法計算,得到映射的數(shù)字字母組合的字符串
? ? ? ? 占位符[ext]使用當(dāng)前模塊原本的占位符,例如: .png/.jpg等字符串
? ? ? ? 占位符[query]保留引入文件時代碼中串參數(shù)(只有URL下生效)
????????
? ? ? ? 2.打包后觀察效果和區(qū)別
注意:
? ? ? ? 判斷臨界值默認(rèn)為8kb
? ? ? ? 大于8kb文件:發(fā)送一個單獨(dú)的文件并導(dǎo)出URL地址
? ? ? ? 小于8kb文件:導(dǎo)出一個data URI(base64字符串)
webpack搭建開發(fā)環(huán)境
問題
? ? ? ? 之前改代碼,需重新打包才能運(yùn)行查看,效率很低
開發(fā)環(huán)境
????????配置webpack-dev-server快速開發(fā)應(yīng)用程序
作用:
? ? ? ? 啟動web服務(wù),自動檢測代碼變化,熱更新到網(wǎng)頁
注意:dist目錄和打包內(nèi)容是在內(nèi)存里(更新快)
步驟:
? ? ? ? 1.下載webpack-dev-server軟件包到當(dāng)前項(xiàng)目
? ? ? ? 2.設(shè)置模式為開發(fā)模式,并配置自定義命令
? ? ? ? 3.使用npm run dev 來啟動開發(fā)服務(wù)器,試試熱更新效果
打包模式:
? ? ? ? 告知webpack使用相應(yīng)模式的內(nèi)置優(yōu)化
分類
????????
| 模式名稱 | 模式名字 | 特點(diǎn) | 場景 |
| 開發(fā)模式 | development | 調(diào)試代碼,實(shí)時加載,模塊熱替換等 | 本地開發(fā) |
| 生產(chǎn)模式 | production | 壓縮代碼,資源優(yōu)化,更輕量等 | 打包上線 |
設(shè)置:
? ? ? ? 方式1:在webpack.config.js配置文件設(shè)置mode選項(xiàng)\
? ? ? ? 方式2:在package.json命令行設(shè)置mode參數(shù)
注意:命令行設(shè)置的優(yōu)先級高于配置文件中,推薦用命令行設(shè)置
打包模式的應(yīng)用
需求:
? ? ? ? 在開發(fā)模式下用style-loader內(nèi)嵌更快,在生產(chǎn)模式小艾提取css代碼
? ? ? ? 方案1:webpack.config.js配置導(dǎo)出函數(shù),但局限性大(只接受2種模式)
? ? ? ? 方案2:借助cross-env(跨平臺通用)包命令,設(shè)置參數(shù)區(qū)分環(huán)境
????????方案3:配置不同的webpack.config.js(適用多種模式差異性較大情況)
步驟:
? ? ? ? 1.下載cross-env軟件包當(dāng)當(dāng)前項(xiàng)目
? ? ? ? 2.配置自定義命令,傳入?yún)?shù)名和值(會綁定到process.env對象下)
? ? ? ? 3.在webpack.config.js區(qū)分不同環(huán)境使用不同配置
? ? ? ? 4.重新打包觀察兩種配置區(qū)別
前端-注入環(huán)境變量
? ? ? ? 需求:前端項(xiàng)目中,開發(fā)模式下打印語句生效,生產(chǎn)模式下打印語句失敗
? ? ? ? 問題
????????????????cross-env設(shè)置只在Node.js環(huán)境生效,前端代碼無法訪問peocss.env.NODE_ENV
? ? ? ? 解決
????????????????使用Webpack內(nèi)置的DefinePlugin插件
? ? ? ? 作用:在編譯時,將前端代碼中匹配的變量名,替換為值或者表達(dá)式
開發(fā)環(huán)境調(diào)錯 - source map
問題
????????代碼被壓縮和混淆,無法正確定位源代碼位置(行數(shù)和列數(shù))
source map:可以準(zhǔn)確追蹤error和warnig在原始代碼的位置
設(shè)置:
? ? ? ? webpack.config.js配置devtool選項(xiàng)
? ? ? ? inline-souce-map選項(xiàng):把源碼的位置信息一起打包在js文件內(nèi)
? ? ? ? 注意:source map 僅適用于開發(fā)環(huán)境,不要在生產(chǎn)環(huán)境使用(防止被查看源碼位置)
解析別名alias
? ? ? ? 解析別名
????????????????配置模塊如何解析,創(chuàng)建import引入路徑別名,來確保模塊引入變得簡單
? ? ? ? 例如:原來路徑如圖,比較長而且相對路徑不安全
? ? ? ? 解決:
????????????????在webpack.config.js中配置解析別名@來代表src絕對路徑
優(yōu)化-CDN使用
CDN定義:
? ? ? ? 內(nèi)容分發(fā)網(wǎng)絡(luò),指的是一組分布在各個地區(qū)服務(wù)器
作用:
? ? ? ? 把靜態(tài)資源文件/第三方庫放在CDN網(wǎng)絡(luò)中各個服務(wù)器中,供用戶請求獲取
好處:
? ? ? ? 減輕自己服務(wù)器請求壓力,就近請求物理延遲低,配套緩存策略
需求:
? ? ? ? 開發(fā)模式使用本地第三方庫,生產(chǎn)模式下使用CDN加載引入
步驟:
? ? ? ? 1.在html中引入第三方庫的CDN地址并用模板語法判斷
????????
? ? ? ? 2.配置webpack.config.js中externals外部擴(kuò)展選項(xiàng)(防止某些import的包被打包)
? ? ? ? 3.兩種模式下打包觀察效果
多頁面打包
單頁面:
? ? ? ? 單個html文件,切換DOM的方式實(shí)現(xiàn)不同業(yè)務(wù)邏輯展示,后續(xù)Vue/React會學(xué)到
多頁面:
? ? ? ? 多個html文件,切換頁面實(shí)現(xiàn)不同業(yè)務(wù)邏輯展示
需求:
? ? ? ? 把內(nèi)容頁面和登錄頁面一起引入打包
步驟:
? ? ? ? 1.準(zhǔn)備源碼(html,css,js)放入相應(yīng)位置,并改用模塊化語法導(dǎo)出
? ? ? ? 2.下載form-serialize包并導(dǎo)入到核心代碼中使用
? ? ? ? 3.配置webpack.config,js多入口和多頁面設(shè)置
? ? ? ? 4.重新打包觀察效果
優(yōu)化-分隔公共代碼
需求:把2個以上頁面引用的公共代碼提取
步驟:
? ? ? ? 1.配置webpack.config.js的splitChunks分隔功能
文章來源：http://www.zghlxwxcb.cn/news/detail-811309.html
? ? ? ? 2.打包觀察效果文章來源地址http://www.zghlxwxcb.cn/news/detail-811309.html
到了這里，關(guān)于前端框架前置學(xué)習(xí)Webpack(1) 常用webpack配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
