概念與功能：
webpack是前端項(xiàng)目工程化的具體解決方案。它提供了友好的前端模塊化開發(fā)支持，以及代碼壓縮混淆、處理瀏覽器端JavaScript的兼容性、性能優(yōu)化等強(qiáng)大的功能。
快速上手：隔行變色
-S實(shí)際是--save的簡寫，表示安裝的第三方庫要被記錄到package.json的<dependencies>（開發(fā)和上線都要用到的包）下。雖然不加這個(gè)參數(shù)也會默認(rèn)記錄到那里。?
其中index.html:?
<!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>
<script src="./index.js">
</script>
</head>
<body>
<ul>
<li>這是第1個(gè)li</li>
<li>這是第2個(gè)li</li>
<li>這是第3個(gè)li</li>
</ul>
</body>
</html>index.js:
//使用ES6的導(dǎo)入語法，導(dǎo)入jquery模塊
import $ from 'jquery'
//jQuery的入口函數(shù)
$(function () {
//實(shí)現(xiàn)奇偶行變色。奇數(shù)行為紅色。偶數(shù)行為粉色
$('li:odd').css('background-color', 'red')
$('li:even').css('background-color', 'pink')
})配置webpack：
1、在項(xiàng)目根目錄的終端那運(yùn)行npm i webpack@5.42.1 webpack-cli@4.7.2 -D
2、在項(xiàng)目根目錄中，創(chuàng)建名為webpack..config.js的webpack配置文件，并初始化如下的基本配置：
//使用Node.js中的導(dǎo)出語法，向外導(dǎo)出一個(gè)webpack的配置對象
module.exports = {
mode: 'development'//mode用來指定建構(gòu)模式，值為development|production
}其中-D是--save-dev的簡寫，意思是將這兩個(gè)包記錄到package.json的devDependencies（開發(fā)階段會被用到，上線不用）下，雖然不加也會默認(rèn)記錄。
3、在package.json的scripts節(jié)點(diǎn)下，新增dev腳本如下：
"scripts": { //即刪除掉原來的test行，因?yàn)樗鼪]有任何作用
"dev": "webpack" //dev是自定義的腳本名，可以通過npm run+腳本名 執(zhí)行。例如npm run dev
}//注意package配置文件不允許注釋，這些注釋只是筆記中記得。4、在終端中運(yùn)行npm run dev命令，啟動(dòng)webpack進(jìn)行項(xiàng)目的打包構(gòu)建
此時(shí)會發(fā)現(xiàn)項(xiàng)目目錄中多了dist目錄，里面的main.js即是webpack對于index.js和index.js中提到的高級語法，如jquery等的兼容重構(gòu)。
5、然后回到index.html，將src改為新生成的main.js即可生成頁面。
6、如果想要壓縮生成的main.js，需要將webpack.config.js里面的mode改為production，然后重新npm run dev
經(jīng)測試得知，production的main.js是88.3 KiB，打包時(shí)間是2145ms，development的main.js是328 KiB，打包時(shí)間是332ms。（下圖上面是production，下面是development）
webpack-dev-server:
類似于node.js階段用到nodemon工具。
每當(dāng)修改了源代碼，webpack會自動(dòng)進(jìn)行項(xiàng)目的打包和構(gòu)建。
1、終端運(yùn)行 npm install webpack-dev-server@3.11.2 -D(如果原來就安裝有其他版本的webpack-dev-server，不管是比當(dāng)前要安裝的高版本還是低版本，都會被覆蓋掉)
2、修改package.json->scripts的dev命令："dev":"webpack serve"
3、再次運(yùn)行npm run dev
4、訪問瀏覽器的http://localhost:8080，查看自動(dòng)打包效果
html-webpack-plugin
webpack中的HTML插件（類似于一個(gè)模板引擎插件）
可以通過此插件自定制index.html頁面的內(nèi)容
1、終端運(yùn)行 npm i html-webpack-plugin@5.3.2 -D
2、修改webpack.config.js如下：
const HtmlPlugin = require('html-webpack-plugin') //導(dǎo)入HTML插件，得到一個(gè)構(gòu)造函數(shù)
//通過構(gòu)造函數(shù)構(gòu)造一個(gè)實(shí)例
const htmlPlugin new HtmlPlugin({
template: './src/index.html', //指定原文件的存放路徑
filename:',/index.html', //指定生成的文件的存放路徑
})
module.exports ={
mode:'development',
plugins:[htmlPlugin],//3.通過plugins節(jié)點(diǎn)，使htmlPlugin插件生效
}指定webpack的入口和輸出：
在webpack4.x和5.x的版本中，有如下的默認(rèn)約定：
默認(rèn)的打包入口文件為src->index.js
默認(rèn)的輸出文件路徑為dist->main.js
但是我們可以在webpack.config.js中，通過entry節(jié)點(diǎn)指定打包的入口。通過output節(jié)點(diǎn)指定打包的出口。
//使用Node.js中的導(dǎo)出語法，向外導(dǎo)出一個(gè)webpack的配置對象
const path=require('path')//導(dǎo)入node.js中專門操作路徑的模塊
module.exports = {
entry: path.join(__dirname,'./src/index.js'),//打包入口文件的路徑
output:{//__dirname表示當(dāng)前文件所屬的目錄，在這里是根目錄
path: path.join(__dirname,'./dist'),//輸出文件的存放路徑
filename:'bundle.js'//輸出文件的名稱
},
mode: 'development'//mode用來指定建構(gòu)模式，值為development|production
//production的main.js是88.3 KiB development的main.js是328 KiB
}loader配置
1、運(yùn)行npm i style-loader@3.0.0 css-loader@5.2.6 -D
2、在webpack.config.js的module->rules數(shù)組中，添加loader規(guī)則如下：文章來源：http://www.zghlxwxcb.cn/news/detail-643239.html
module: {
rules: [//指定要加載的規(guī)則
{
test:/\.css$/,
//test指定的是規(guī)則生效的文件，這里表示所有以.css結(jié)尾的文件
use:['style-loader','css-loader']//表示要調(diào)用的loader
}
]
},其中，test表注意：use數(shù)組中指定的loader順序是固定的，多個(gè)loader的調(diào)用順序是：從后往前調(diào)用文章來源地址http://www.zghlxwxcb.cn/news/detail-643239.html
到了這里，關(guān)于一、Webpack相關(guān)（包括webpack-dev-server用以熱更新和html-webpack-plugin）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
