webpack 是前端項(xiàng)目工程化的具體解決方案。 它提供了友好的前端模塊化開(kāi)發(fā)支持，以及代碼壓縮混淆、處理瀏覽器端 JavaScript 的兼容性、性能優(yōu)化等強(qiáng)大的功能。

讓程序員把工作的重心放到具體功能的實(shí)現(xiàn)上，提高了前端開(kāi)發(fā)效率和項(xiàng)目的可維護(hù)性。目前企業(yè)級(jí)的前端項(xiàng)目開(kāi)發(fā)中，絕大多數(shù)的項(xiàng)目都是基于 webpack 進(jìn)行打包構(gòu)建的。

在項(xiàng)目中安裝webpack，需要先在終端運(yùn)行如下的命令，安裝 webpack 相關(guān)的兩個(gè)包：

npm install webpack@5.5.1 webpack-cli04.2.0 -D

在項(xiàng)目中配置 webpack

① 在項(xiàng)目根目錄中，創(chuàng)建名為 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

module.exports ={
   mode:'development'// mode用來(lái)指定構(gòu)建模式。可選值有 development和 production
}

② 在 package.json 的 scripts 節(jié)點(diǎn)下，新增 dev 腳本如下：

"scripts":{
   “dev"：“webpack"// script 節(jié)點(diǎn)下的腳本,可以通過(guò) npm run 執(zhí)行。例如 npm run dev
}

③ 在終端中運(yùn)行 npm run dev 命令，啟動(dòng) webpack 進(jìn)行項(xiàng)目的打包構(gòu)建。