這里版本對(duì)比/問(wèn)題/解決方法/概念/安裝/使用
https://www.webpackjs.com/guides/installation/
一.問(wèn)題
在一個(gè)index.html文件中會(huì)引入許多css,js,images,fonts,文件,每次遇到src都會(huì)向服務(wù)器發(fā)送一次請(qǐng)求,這樣項(xiàng)目的執(zhí)行效率是非常低的
二.解決方法
所以在正式部署應(yīng)用程序之前,我們會(huì)將js,css文件合并到一個(gè)文件中,會(huì)把images組成精靈圖,會(huì)壓縮代碼,來(lái)減少請(qǐng)求資源次數(shù),提升應(yīng)用程序執(zhí)行效率,但是自己做壓縮,合并是非常麻煩的,所以誕生了前端構(gòu)建工具幫我們做這些事
三.什么是webpack(項(xiàng)目打包工具)
webpack是基于Node.js的前端項(xiàng)目構(gòu)建工具,可以很好的幫助我們打包壓縮項(xiàng)目,省去了過(guò)去很多繁瑣的操作,提升項(xiàng)目的執(zhí)行效率
四.安裝webpack
通過(guò)npm安裝即可
webpack3:
npm i -g webpack
webpack4:
npm i -g webpack
npm i -g webpack-cli
但是在全局安裝成功后,最好在局部也安裝,因?yàn)橛行┎寮枰蕾嚲植縲ebpack才能安裝
在項(xiàng)目文件夾下
npm init(因?yàn)槭且蕾噉pm安裝的,所以要初始化npm項(xiàng)目,記錄包)
npm i webpack
五.使用webpack
原始:
我們會(huì)將所有js文件一個(gè)一個(gè)的導(dǎo)入index.html中
現(xiàn)在:
我們?cè)趙ebpack(node)的入口文件中通過(guò)ES6提供的import語(yǔ)法,將所有js文件導(dǎo)入到一個(gè)js文件中,然后在index.html中導(dǎo)入入口js文件index.js
import 別名 from "包名稱"
問(wèn)題:
由于import語(yǔ)法太高級(jí),瀏覽器無(wú)法識(shí)別所以報(bào)錯(cuò)
解決方法:
通過(guò)webpack把index.js編譯程瀏覽器可以識(shí)別的低級(jí)語(yǔ)法導(dǎo)入index.html文件中
在項(xiàng)目文件夾下運(yùn)行:
webpack4:
webpack --mode development
webpack --mode production
webpack3:
webpack ./src/index.js ./dist/bundle.js
六.代碼測(cè)試
-
搭建項(xiàng)目文件目錄
image.png - 局部安裝webpack4
- npm init(所有通過(guò)npm管理包的項(xiàng)目都要初始化)
- npm i webpack
- npm i webpack-cli
- npm i jquery -D
-
webpack --mode development(將瀏覽器無(wú)法識(shí)別的高級(jí)語(yǔ)法打包)
image.png
image.png
image.png
