Webpack如何理解

Webpack如何理解，很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

10年積累的成都網(wǎng)站制作、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有八宿免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

1. 摘要

Webpack是一種前端資源構(gòu)建工具，一個(gè)靜態(tài)模塊打包器。在Webpack看來，前端的所有資源文件(js/json/css/img/less/…)都會(huì)作為模塊處理，當(dāng)Webpack處理應(yīng)用程序時(shí)，它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，打包生成對應(yīng)的靜態(tài)資源。Webpack打包流程圖如圖1-1所示。

圖1-1 Webpack打包流程圖

2. Webpack五個(gè)核心概念

2.1 Entry

入口(Entry)指示W(wǎng)ebpack以哪個(gè)文件作為入口起點(diǎn)分析構(gòu)建內(nèi)部依賴圖并進(jìn)行打包。

2.2 Output

輸出(Output)指示W(wǎng)ebpack打包后的資源bundles輸出到哪里去，以及如何命名。

2.3 Loader

Loader讓W(xué)ebpack能夠去處理那些非JavaScript語言的文件，Webpack本身只能理解JavaScript。

2.4 Plugins

插件(Plugins)可以用于執(zhí)行范圍更廣的任務(wù)，插件的范圍包括從打包和壓縮，一直到重新定義環(huán)境中的變量等。

2.5 Mode

模式(Mode)指示W(wǎng)ebpack使用相應(yīng)模式的配置。分為development和production兩種模式，下面分別進(jìn)行簡述。

• development: 開發(fā)模式，能讓代碼本地運(yùn)行的環(huán)境，會(huì)將process.env.NODE_ENV的值設(shè)為development，同時(shí)啟用NamedChunksPlugin和NamedModulesPlugin插件；

• production: 生產(chǎn)模式，能讓代碼優(yōu)化運(yùn)行的環(huán)境，會(huì)將process.env.NODE_ENV的值設(shè)為production，同時(shí)啟用FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitreplaceStringsPlugin、OccurrenceOrderPlugin、SideEffectsFlagPlugin和UglifyJsPlugin插件。

3. Wbepack配置

3.1 webpack.config.js文件

webpack.config.js是webpack的配置文件，用來指示webpack工作，運(yùn)行webpack指令時(shí)，會(huì)加載里面的配置，所有構(gòu)建工具都是基于nodejs平臺運(yùn)行的，默認(rèn)采用commonjs模塊化。webpack.config.js基礎(chǔ)配置如圖3-1所示。

圖3-1 webpack.config.js基礎(chǔ)配置

3.2 devServer配置

開發(fā)服務(wù)器(devServer)用來實(shí)現(xiàn)自動(dòng)化(自動(dòng)編譯、自動(dòng)打開瀏覽器、自動(dòng)刷新瀏覽器)，只會(huì)在內(nèi)存中編譯打包，不會(huì)有任何文件輸出，本地安裝webpack-dev-server后，通過npx webpack-dev-server命令啟動(dòng)devServer，核心代碼如圖3-2所示。

圖3-2 devServer配置核心代碼

3.3 打包html/樣式/圖片/其它資源

打包不同的資源會(huì)使用不同的loader和插件，打包html/樣式/圖片/其它資源的流程如下所述。

3.3.1 打包html資源

1.下載html-webpack-plugin插件；

2.引入html-webpack-plugin插件；

3.使用html-webpack-plugin插件，并進(jìn)行相應(yīng)配置。

3.3.2 打包樣式資源

不同的樣式文件需要配置不同的loader

1.下載loader；

2.配置loader，css樣式文件使用css-loader和style-loader，less文件使用less-loader、css-loader和style-loader。其中css-loader的作用是將css文件變成commonjs模塊加載到j(luò)s文件中，style-loader的作用是創(chuàng)建style標(biāo)簽，將js中的樣式資源插入進(jìn)去，添加到head中生效。

3.3.3 打包圖片資源

1.下載url-loader，file-loader

2.配置loader

3.3.4 打包其它資源

1.下載file-loader

2. 配置loader，配置該loader作用于不為html/css/less/js的其他文件

3.4 提取css成單獨(dú)文件/css兼容性處理/壓縮css

3.4.1 提取css成單獨(dú)文件

樣式文件打包后會(huì)默認(rèn)和js文件一起輸出，可以通過插件將打包后的css文件單獨(dú)輸出，流程如下所述。

1.下載mini-css-extract-plugin插件

2.引用該插件

3.配置

3.4.2 css兼容性處理

1.下載postcss-loader和postcss-preset-env

2.在package.json中browsetslist屬性中分別對開發(fā)環(huán)境和生產(chǎn)環(huán)境進(jìn)行兼容性配置，設(shè)置支持樣式的瀏覽器版本

3.通過postcss找到package.json中browserslist里面的配置，通過配置加載指定的css兼容性樣式。

3.4.3 壓縮css

1.下載optimize-css-assets-webpack-plugin插件

2.引用該插件

3.使用該插件

3.5 js語法檢查eslint/js兼容性處理/js壓縮

3.5.1 js語法檢查eslint

1.下載eslint-loader和eslint

2.在package.json中的eslintConfig中進(jìn)行配置

3.配置eslint-loader，其中只需檢測js文件并要排除第三方庫，只檢測自己寫的源代碼，同時(shí)可在options配置中設(shè)置fix:true，自動(dòng)修復(fù)eslint的錯(cuò)誤。

3.5.2 js兼容性處理

1.下載babel-loader、@babel/core、@babel/preset-env，通過@babel/preset-env做基本的js兼容性處理，然后通過corejs做前面無法實(shí)現(xiàn)的兼容性處理，并實(shí)現(xiàn)按需加載

2. 配置loader

js兼容性處理核心代碼如圖3-3所示

圖3-3 js兼容性處理核心代碼

3.5.3 js壓縮

mode設(shè)置為production生產(chǎn)環(huán)境時(shí)會(huì)自動(dòng)壓縮js代碼。

4. webpack性能優(yōu)化

可以從開發(fā)環(huán)境和生產(chǎn)環(huán)境分別對webpack進(jìn)行性能優(yōu)化。其中開發(fā)環(huán)境主要考慮從打包構(gòu)建速度和代碼調(diào)試兩個(gè)方面進(jìn)行優(yōu)化，生產(chǎn)環(huán)境主要考慮從打包構(gòu)建速度和代碼運(yùn)行性能這兩個(gè)方面進(jìn)行優(yōu)化。下面簡單介紹下開發(fā)環(huán)境上通過HMR提升構(gòu)建速度。

4.1 HMR

HMR(熱模塊替換)，作用是一個(gè)模塊發(fā)生變化后，只會(huì)更新打包這一個(gè)模塊而不是所有模塊，通過在devServer中設(shè)置hot:true屬性啟動(dòng)HMR功能。

其中對于樣式文件，可以使用HMR功能，因?yàn)閟tyle-loader內(nèi)部實(shí)現(xiàn)了；

對于js文件，默認(rèn)不能使用HMR功能，解決方法：修改入口文件js代碼，添加支持HMR功能的代碼，另外HMR只能處理非入口js文件的其他文件，對入口文件并不能生效，因?yàn)橐坏┤肟谖募?，入口文件引入的其他文件一定?huì)被重新加載；

對于html文件，默認(rèn)不能使用HMR功能，同時(shí)會(huì)導(dǎo)致html文件不能熱更新，解決方法：修改entry入口文件，將html文件引入，只能解決html文件不能熱更新的問題。

js文件支持HMR功能的核心代碼如圖4-1所示。

圖4-1 js文件支持HMR功能核心代碼

4.2 HMR效果

在入口index.js文件中引入print.js文件，運(yùn)行npx webpack-devserver后，頁面如圖4-2所示。

4-2 初始頁面

修改print.js文件后，只會(huì)重新加載print.js文件，而不會(huì)重新加載index.js文件，HMR效果如圖4-3所示。

4-3 HMR效果圖

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

文章題目：Webpack如何理解
文章鏈接：http://muchs.cn/article0/jejhio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站內(nèi)鏈、面包屑導(dǎo)航、App設(shè)計(jì)、網(wǎng)站導(dǎo)航、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)