webpack的學(xué)習(xí)目標(biāo)
-
理解什么是前端工程化
-
轉(zhuǎn)變對(duì)前端開發(fā)的認(rèn)知
-
了解webpack的基本用法
-
為后面Vue和React課程的學(xué)習(xí)做技術(shù)儲(chǔ)備
-
不強(qiáng)制要求大家能手動(dòng)配置 webpack
-
一定要知道webpack在項(xiàng)目中有什么作用
-
清除webpack中的核心概念
小白眼中的前端開發(fā) vs 實(shí)際的前端開發(fā)
-
小白眼中的前端開發(fā)
-
會(huì)寫HTML + CSS +JavaScript就會(huì)前端開發(fā)
-
需要美化頁面樣式，就拽一個(gè)bootstrap過來
-
需要操作DOM或發(fā)起Ajax，再拽一個(gè)jquery過來
-
需要快速實(shí)現(xiàn)網(wǎng)頁布局效果，就拽一個(gè)Layui過來
-
實(shí)際的前端開發(fā)
-
模塊化（js的模塊化，css的模塊化，資源的模塊化）
-
組件化（復(fù)用現(xiàn)有的UI結(jié)構(gòu)，樣式，行為）
-
規(guī)范化（目錄結(jié)構(gòu)的劃分，編碼規(guī)范化，接口規(guī)范化，文檔規(guī)范化，Git分支管理）
-
自動(dòng)化（自動(dòng)化構(gòu)建，自動(dòng)部署，自動(dòng)化測(cè)試）
什么是前端工程化
前端工程化指的是：在企業(yè)級(jí)的前端項(xiàng)目開發(fā)中，把前端開發(fā)所謂的工具，技術(shù)，流程，經(jīng)驗(yàn)等進(jìn)行規(guī)范化，標(biāo)準(zhǔn)化。
企業(yè)中的Vue項(xiàng)目和React項(xiàng)目，都是基于工程畫的方式進(jìn)行開發(fā)。
好處：前端開發(fā)自成體系，有一套標(biāo)準(zhǔn)的開發(fā)方案和流量。
前端工程化的解決方案
-
早期的前端工程化解決方案
-
目前主流的前端工程化解決方案
webpack的基本使用
什么是webpack
概念： webpack是前端項(xiàng)目工程化的具體解決方案。
主要功能：它提供了友好的前端模塊化開發(fā)支持，以及代碼壓縮混淆，處理瀏覽器端JavaScript的兼容性性能優(yōu)化等強(qiáng)大的功能。
好處：讓程序員把工作的重心放到具體功能的實(shí)現(xiàn)上，提高了前端開發(fā)效率和項(xiàng)目的可維護(hù)性。
注意：目前Vue，React等前端項(xiàng)目，基本上都是基于webpack進(jìn)行工程化開發(fā)的。
列表隔行變色項(xiàng)目
步驟
-
新建項(xiàng)目空白目錄，并運(yùn)行npm init -y命令，初始化包管理配置文件package.json
-
新建src源代碼目錄
-
新建src->index.html首頁和src->index.js腳本文件
-
初始化首頁基本的結(jié)構(gòu)
-
運(yùn)行npm install jquery -s命令，安裝jQuery
-
通過ES6模塊化的方式導(dǎo)入jQuery，實(shí)現(xiàn)列表隔行變色的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> ul>li{這是第$個(gè)li}*9 </body> </html>
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
import和require導(dǎo)入模塊的區(qū)別
1、require對(duì)應(yīng)導(dǎo)出的方法是module.exports,
import對(duì)應(yīng)的方法是export default/export
2、require 是CommonJs的語法
import 是 ES6 的語法標(biāo)準(zhǔn)。
3、require是運(yùn)行運(yùn)行時(shí)加載模塊里的所有方法（動(dòng)態(tài)加載），
import 是編譯的時(shí)候調(diào)用（靜態(tài)加載），不管在哪里引用都會(huì)提升到代碼頂部。
4、require 是CommonJs的語法，引入的是的是整個(gè)模塊里面的對(duì)象，
import 可以按需引入模塊里面的對(duì)象
5、require 導(dǎo)出是值的拷貝,
import 導(dǎo)出的是值的引用
6. require是node.js帶有的 CommonJS語法里的東西，可以在終端中運(yùn)行
如果要在瀏覽器端運(yùn)行 我們要使用import這個(gè)es6語法
js代碼
import $ from "jquery"; $(function () { $('li:odd').css('background-Color', 'red') $('li:even').css('background-Color', 'pink') })
將js文件導(dǎo)入index.html之后，發(fā)現(xiàn)沒有效果，這時(shí)我們就需要webpack工具了，將語法進(jìn)行重新編譯，把es6語法轉(zhuǎn)化為es5語法。
在項(xiàng)目中安裝并配置webpack
npm i webpack@5.42.1 webpack-cli -D
生產(chǎn)依賴
創(chuàng)建webpack.config.js配置文件并寫入
const { Module } = require("webpack"); Module.export = { mode: 'development' }
在package.json配置文件中的script中寫入聲明
最后執(zhí)行npm命令進(jìn)行編譯，有一個(gè)注意點(diǎn)就是node.js版本需要是17版本以下的不然會(huì)出錯(cuò)，當(dāng)然應(yīng)該有其他解決辦法，但博主不會(huì)，只好退回版本
執(zhí)行 npm run dev 這個(gè)命令，可以看到src里的index.js和jquery.js都被壓縮了。
會(huì)生成一個(gè)編譯后的文件夾
將main.js文件導(dǎo)入index.html.，不用導(dǎo)入index.js。
打開頁面就可以成功顯示了
mode的可選值
mode節(jié)點(diǎn)的可選值有兩個(gè)，分別是：
-
development
-
開發(fā)環(huán)境
-
不會(huì)對(duì)打包生成的文件進(jìn)行代碼壓縮和性能優(yōu)化
-
打包速度快，適合在開發(fā)階段使用。
-
production
-
生產(chǎn)環(huán)境
-
會(huì)對(duì)打包生成的文件進(jìn)行代碼壓縮和性能優(yōu)化
-
打包速度很慢，僅適合在項(xiàng)目發(fā)布階段使用
開發(fā)的時(shí)候使用development，打包速度快，上線的時(shí)候使用production，體積小。
webpack.config.js的作用
當(dāng)我們使用npm run dev這個(gè)命令的時(shí)候，會(huì)執(zhí)行package里的dev里的內(nèi)容，
dev里寫的webpack，那么它就會(huì)執(zhí)行weboack.config.js這個(gè)文件里的內(nèi)容，根據(jù)里面的內(nèi)容再進(jìn)行打包。
webpack中的默認(rèn)約定
大家可能有個(gè)疑問，就是打包的時(shí)候?yàn)槭裁磿?huì)打包index.js這個(gè)文件，它是怎么尋找的路徑等問題。
在webpack4和5的版本中，有如下的默認(rèn)約定，找不到就會(huì)報(bào)錯(cuò)。
-
默認(rèn)的打包入口文件為src -> index.js
-
默認(rèn)的輸出文件路徑為dist -> main.js
注意：可以在webpack.config.js中修改打包的默認(rèn)約定。
自定義打包的入口和出口
在webpack.config.js配置文件中，通過entry節(jié)點(diǎn)指定打包的入口，通過output節(jié)點(diǎn)指定打包的出口文件夾和出口文件。
const path = require("path"); module.exports = { mode: 'development', entry: path.join(__dirname, 'src/index.js'), output: { path: path.join(__dirname, 'dist1'), filename: 'new.js' } }
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
生成的文件就變了。
webpack中的插件
當(dāng)我們修改js文件之后，需要重新打包才能有效，每修改一次都要重新打包一次，這就很麻煩我們可以 通過安裝和配置第三方的插件，可以擴(kuò)展webpack的能力，從而讓webpack用起來更方便，常用的webpack插件有如下兩個(gè)：
-
webpack-dev-server
-
類似于node.js階段用到的nodemon工具。
-
每當(dāng)修改了源代碼，webpack會(huì)自動(dòng)進(jìn)行項(xiàng)目的打包和構(gòu)建。
-
html-webpack-plugin
-
webpack中的html插件（“類似于一個(gè)模板引擎插件”），
-
可以通過此插件自定制index.html頁面的內(nèi)容。
webpack-dev-server
安裝webpack-dev-server
安裝命令
npm install webpack-dev-server@3.11.2 -D
配置webpack-dev-server
-
重新配置package.json中的script里的dev內(nèi)容
-
再次運(yùn)行 npm run dev命令，重新進(jìn)行項(xiàng)目打包
-
在瀏覽器中訪問本地8080端口，查看自動(dòng)打包效果。
注意：webpack-dev-server會(huì)啟動(dòng)一個(gè)實(shí)時(shí)打包的http服務(wù)器。
這樣當(dāng)我們每次修改index.js文件時(shí)，保存后就會(huì)自動(dòng)打包，摁兩次ctrl+c就可以終止運(yùn)行。
這種打包實(shí)際上時(shí)虛擬打包，并不是每次保存打包之后將main.js進(jìn)行了修改，當(dāng)我們修改代碼保存自動(dòng)打包之后，我們發(fā)現(xiàn)頁面UI并沒有變化，那是因?yàn)閙ain.js實(shí)際上沒有修改，訪問自動(dòng)打包修改后的頁面需要訪問本地8080端口
在這個(gè)http服務(wù)器內(nèi)才能訪問到修改后的內(nèi)容，我們前面說了修改后的js并沒有保存到main.js中，那它保存到哪里去了？它其實(shí)被保存到了根目錄中，以內(nèi)存的形式進(jìn)行了保存。
文件名跟你前面設(shè)置的打包文件名一樣，雖然看不到這個(gè)文件但是可以進(jìn)行訪問，我們需要把頁面引入鏈接從 new.js改成新生成的保存到內(nèi)存中的new.js，完成這兩個(gè)步驟就可以真正的實(shí)現(xiàn)自動(dòng)打包并實(shí)時(shí)演示了。
html-webpack-plugin
當(dāng)我們開啟了自動(dòng)打包服務(wù)功能，訪問服務(wù)器后，顯示的是根目錄，需要點(diǎn)擊一下文件夾，才能顯示頁面文件index.html，我們只需要把頁面文件copy一份兒到根目錄，這樣點(diǎn)開網(wǎng)頁就能直接顯示，這個(gè)webpack插件就可以實(shí)現(xiàn)相應(yīng)的功能。
安裝
npm install html-webpack-plugin@5.3.2 -D
使用代碼
const HtmlPluginConfig = require('html-webpack-plugin') const HtmlPlugin = new HtmlPluginConfig(); const HtmlPlugin = new HtmlPluginConfig({ template: './src/index.html', filename: './index.html' });
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
最后再向外暴露對(duì)象
plugins: [HtmlPlugin]
執(zhí)行 npm run dev命令，進(jìn)行自動(dòng)打包，然后進(jìn)入本地8080端口網(wǎng)頁，就可以直接看到頁面了。
當(dāng)你修改js之后也會(huì)實(shí)時(shí)更新。
注意點(diǎn)以及個(gè)人建議和理解
我們可以在scripts里設(shè)置兩個(gè)屬性，dev是用來開發(fā)實(shí)時(shí)瀏覽觀看內(nèi)容的，dev2是用來進(jìn)行物理打包的（當(dāng)你完成項(xiàng)目需要打包的時(shí)候）。
這里我需要說一下html-webpack-plugin這個(gè)插件，上面我們可以直接看到頁面是因?yàn)檫@個(gè)插件復(fù)制了一份兒index.html到根目錄所以可以直接訪問。
這個(gè)插件里面 有個(gè)屬性叫filename，就是你將文件復(fù)制到什么位置。
兩個(gè)注意點(diǎn)
第一個(gè)就是它的值，屬性值寫的相對(duì)路徑是根據(jù)你打包文件的位置為基準(zhǔn)的，并不是webpack.config.js的文件位置，./就跟你的new.js文件在同一個(gè)文件夾里，…/就在new.js的上級(jí)文件夾里，所以當(dāng)你打包的時(shí)候會(huì)發(fā)現(xiàn)除了new.js之外還有index.html
第二個(gè)就是輸出方式，如果執(zhí)行的是dev2，那么就跟new.js進(jìn)行物理復(fù)制，如果執(zhí)行的是dev那么就跟new.js一樣，以內(nèi)村存儲(chǔ)的方式進(jìn)行保存。
生成的html文件里會(huì)自動(dòng)導(dǎo)入同時(shí)打包的js文件
devServer節(jié)點(diǎn)
在webpack.config.js配置文件中，可以通過devServer節(jié)點(diǎn)對(duì)webpack-dev-server插件進(jìn)行更多配置。
其中有一些屬性設(shè)置可以更方便我們進(jìn)行開發(fā)。
devServer: { open: true, port: 8080, host: '127.0.0.1' }
