webpack的主要功能
它提供了友好的前端模塊化開發(fā)的支持疫粥，以及代碼壓縮混淆、處理瀏覽器端javascript 的兼容性故爵、性能優(yōu)化等強(qiáng)大的功能玻粪。
1、webpack 基本使用
1诬垂、新建項(xiàng)目空白目錄劲室，并運(yùn)行 npm init -y 命令，初始化包管理配置文件package.json
2剥纷、新建src源代碼目錄痹籍，并創(chuàng)建index.html 和 index.js文件
3、運(yùn)行 npm install jquery -S 命令晦鞋，安裝jQuery
清理npm緩存：npm cache clean --force
指定鏡像安裝：npm --registry https://registry.npm.taobao.org install
4蹲缠、通過ES6 模塊化方式導(dǎo)入jquery
運(yùn)行 npm init -y 會生成如下一個json 文件
在通過執(zhí)行 npm install jquery -S 命令安裝jquery的時候棺克，可能會出現(xiàn)安裝失敗的情況，如下：
大概意思是：taobao的這個鏡像找不到這個庫了线定，可以切換一個國外的鏡像
npm config get registry
--> http://registry.npm.taobao.org/
這是以前安裝vue的時候設(shè)置的鏡像娜谊，的確比不設(shè)置的時候快很多，
設(shè)置國外的鏡像
npm config set registry http://registry.npmjs.org
然后再執(zhí)行安裝命令 , 發(fā)現(xiàn)就可以正常安裝了（如果后面發(fā)現(xiàn)國外的不好用了斤讥， 可以在切換到淘寶鏡像）
# 其中 -S 是 --save簡寫纱皆，指定引用的庫放在dependencies 節(jié)點(diǎn)下，這個節(jié)點(diǎn)下的庫芭商， 在開發(fā)和發(fā)布都會用到的庫
npm install jquery -S
此時派草，會在package.json文件中發(fā)現(xiàn)一個dependencies 節(jié)點(diǎn)， 并保留有jquery的信息铛楣，就代表這個項(xiàng)目要使用這個庫了
2近迁、在項(xiàng)目中安裝 webpack
在終端運(yùn)行如下命令，安裝webpack相關(guān)的兩個包
# --save-dev: 安裝到項(xiàng)目的依賴中 | 簡寫：-D
# 安裝最新版本（其中-D 是將引用的內(nèi)容放在 devDependencies節(jié)點(diǎn)下簸州，這個節(jié)點(diǎn)下的庫鉴竭， 只用于開發(fā)的時候）
npm i -D webpack
# 安裝指定版本
npm i -D webpack@<version>
#安裝 webpack-cli
npm i -D webpack-cli
在等待一段時間后， 在package.json文件又多了點(diǎn)新東西如下：
"devDependencies": {
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
}
3岸浑、在項(xiàng)目中配置webpack
1搏存、在項(xiàng)目根目錄中，創(chuàng)建名為webpack.config.js的webpack配置文件矢洲，并初始化如下的基本配置：
這個文件是在 npm run xxx命令 的時候璧眠，加載項(xiàng)目根目錄下面的 webpack.config.js 文件， 并拿到mode的數(shù)據(jù)读虏，然后判斷用什么方式打包
// 使用node.js 中的導(dǎo)出語法蛆橡，向外到處一個webpack的配置對象
module.exports = {
// 代表webpack的運(yùn)行模式，可選值為： development 和 production
mode : "development "
}
經(jīng)過測試總結(jié)得到：
1）掘譬、在開發(fā)階段mode 要設(shè)置為："development" ，這種模式打包速度快呻拌，體積大葱轩，打包效率很高 ，基本沒有壓縮藐握。
2）靴拱、在上線階段mode要設(shè)置為："production" ， 這種模式 打包速度慢猾普，體積小袜炕，打包效率低殖告，但是壓縮的包很小遣疯。
2、 在package.json的scripts節(jié)點(diǎn)下罕偎，新增dev 腳本如下：
"scripts": {
// 前面的名字(dev)可以隨意取， 后面是要執(zhí)行的腳本陌知，所以是固定的
"dev" : "webpack"
}
3他托、在命令行窗口中執(zhí)行腳本 npm run dev， 結(jié)果如下：
到這一步仆葡，我們借助webpack 工具對我們的項(xiàng)目做了一個處理赏参，幫助我們處理兼容性問題，在dist目錄下面生成的main.js 就已經(jīng)沒有兼容性問題了沿盅， 我們在html中可以直接使用
然后會在項(xiàng)目根目錄下面多一個dist的目錄文件
4 把篓、 webpack 中的默認(rèn)約定
在webpack 4.x 和 5.x 的版本中， 有如下默認(rèn)約定：
1)腰涧、默認(rèn)的打包入文件為： src --> index.js
2)韧掩、默認(rèn)的輸出文件路徑為： dist --> main.js
5 、 自定義打包入口與出口
在webpack.config.js 配置文件中南窗，通過entry 節(jié)點(diǎn)指定打包 的入口揍很。通過output節(jié)點(diǎn)指定打包的出口。
# 導(dǎo)入nodejs 的 path model
const path = require('path')
// 使用node.js 中的導(dǎo)出語法万伤，向外到處一個webpack的配置對象
module.exports = {
// 代表webpack的運(yùn)行模式窒悔，可選值為： development 和 production
mode : "development",
/**
* entry:"指定要處理哪個文件" 。
* __dirname ： 就代表當(dāng)前文件所在的目錄
*/
entry:path.join(__dirname,'./src/index123.js'),
/**
* output:"指定生成的文件要存放在哪里
*/
output:{
// 存放到的目錄
path:path.join(__dirname,'dist'),
// 生成的文件名
filename : 'bundle.js'
}
}
這種需要手動打包（npm run dev）敌买，然后再啟動服務(wù)简珠，刷新訪問我們的目標(biāo)文件（index.html），那能不能虹钮，在我們修改完畢代碼后聋庵，里面就展示在瀏覽器訪問的目標(biāo)文件中呢？
答案是可以的 芙粱。
6祭玉、webpack 插件
6.1 webpack-dev-server
6.1.1 webpack-dev-server 插件 介紹
在這里需要介紹一個 插件
webpack-dev-server
這個插件會監(jiān)聽文件是否修改，并在文件修改完畢并保存的時候春畔， 從新編譯執(zhí)行（webpack命令）
# 如果不知到工具版本脱货，可以不寫版本，默認(rèn)下載最新版本
npm install webpack-dev-server@3.11.2 -D
6.1.2 webpack-dev-server 使用
在package.json 文件中的 scripts 腳本中的webpack 加上 serve 即可
"scripts": {
# 在webpack后面加個空格 serve 即可
"build": "webpack serve"
}
這樣就啟動了 webpack-dev-server插件
由于在修改代碼的過程中需要不斷的從新編譯律姨，所以插件為了快速實(shí)現(xiàn)效果振峻，回把編譯好的文件放在內(nèi)存中，文件中不會存在择份，這樣就實(shí)現(xiàn)了快速更新的目的扣孟。
同樣，在我們啟動服務(wù)后荣赶，可以通過http://localhost:8080/bundle.js 這個地址訪問凤价，bundle.js 是自定義的名字鸽斟，默認(rèn)是 main.js , 但是這個文件不會寫在物理磁盤上。
那么這個時候料仗，我們在html就可以直接使用bundle.js文件
6.2 html-webpack-plugin
6.2.1 html-webpack-plugin簡介
這個插件是方便我們把源碼目錄（src）里面的html文件拷貝到 指定目錄下面湾盗， 而不是直接訪問源碼目錄(src)
6.2.2 配置html-webpack-plugin
#1、導(dǎo)入html-webpck-plugin , 創(chuàng)建一個構(gòu)造函數(shù)
const HtmlPlugin = require('html-webpack-plugin')
#2立轧、創(chuàng)建HtmlPlugin 插件實(shí)例對象
const htmlPlugin = new HtmlPlugin({
template:'./src/index.html', // 指定原文件的存放路徑
filename:'./index.html' // 指定生成的文件存放路徑
})
#3格粪、在webpack.config.js配置文件中 通過plugins 節(jié)點(diǎn)，使htmlplugin插件生效
module.exports = {
mode : "development",
plugins: [htmlPlugin]
}
這個插件的作用
1氛改、把 指定的文件放在內(nèi)存中帐萎， 而不是放在物理磁盤中
2、html 插件在生成的index.html頁面胜卤，自動注入了打包的bundle.js文件（通過查看index.html文件 源文件代碼可以看到）
7 webpack中的loader
在webpack中一切皆模塊疆导，都可以通過ES6導(dǎo)入語法導(dǎo)入。那么在導(dǎo)入非js文件的時候葛躏，就需要通過配置的loader 來加載不同的資源文件澈段，否則就會報錯
7.1 打包處理css文件
// 執(zhí)行安裝命令，處理css 文件
npm i style-loader css-loader -D ,
在webpack.config.js的module->rules 數(shù)組中舰攒，添加loader規(guī)則如下：
// 所有第三方文件模塊的匹配規(guī)則
module:{
// 文件后綴名的匹配規(guī)則
rules:[
/**
* 使用test 正則表達(dá)式匹配文件后綴
* use 表示要對應(yīng)調(diào)用的loader
* 注意： use數(shù)組中指定loader的順序是倒序,也就是先給最后一個loader 處理（css-loader）
* 當(dāng)css-loader處理完畢之后败富，會把處理結(jié)果轉(zhuǎn)交給下一個loader（style-loader），
* 如果沒有更多的loader摩窃，那么就把處理結(jié)果返回給webpack兽叮，最后webpack把結(jié)果合并到bundle.js文件中
*/
{test:/\.css$/,use:['style-loader','css-loader']}
]
}
7.2 打包處理less文件
// 安裝less-loader less (less 是 less-loader的內(nèi)置依賴項(xiàng))
npm i less-loader less -D
// 然后在module-->rules 節(jié)點(diǎn)里面配置 一個新的文件匹配和加載器
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
7.3 打包處理 樣式中國與url路徑相關(guān)的文件
// 安裝 url-loader file-loader (內(nèi)置依賴項(xiàng))
npm i url-loader file-loader -D
// 配置 url-loader ，加載 jpg 猾愿、png鹦聪、gif 的文件
/**
* 參數(shù)：limit 是告訴url-loader ，在加載圖片的時候蒂秘， 如果圖片的大小小于或等于給定值的時候泽本，
* 才會把圖片轉(zhuǎn)換成base64；如果圖片大小大于給定值姻僧，則不會轉(zhuǎn)換成base64观挎，而是直接用地址訪問
*/
{test:/\.jpg|png|gif$/,use:['url-loader?limit=22229']}
7.4 打包處理 處理復(fù)雜js
例如：
function info(target) {
target.info = 'add info'
}
@info
class Person {}
console.log("=======",Person.info)
這個解析器語法，正常js是無法解析的
安裝babel-loader 相關(guān)包
1段化、安裝
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
// 其中 @babel/plugin-proposal-decorators 這個插件可以識別 解釋器語法
2、配置 加載項(xiàng)
/**
* 使用babel-loader 處理js高級語法
* exclude ： 排除項(xiàng) 造成， 即：排除第三方的包 node_models , 第三方包的兼容性不需要我們操心
*/
{test:/\.js$/,use:['babel-loader'],exclude:/node_models/},
3显熏、 在根目錄下， 創(chuàng)建名為babel.config.js 的配置文件晒屎，定位babel的配置項(xiàng)如下:
module.exports = {
// 聲明babel可用的插件
plugins :[
['@babel/plugin-proposal-decorators',{legacy:true}]
]
}