更新時間:2023-08-02 來源:黑馬程序員 瀏覽量:
webpack 是前端項(xiàng)目工程化的具體解決方案。 它提供了友好的前端模塊化開發(fā)支持,以及代碼壓縮混淆、處理瀏覽器端 JavaScript 的兼容性、性能優(yōu)化等強(qiáng)大的功能。
讓程序員把工作的重心放到具體功能的實(shí)現(xiàn)上,提高了前端開發(fā)效率和項(xiàng)目的可維護(hù)性。目前企業(yè)級的前端項(xiàng)目開發(fā)中,絕大多數(shù)的項(xiàng)目都是基于 webpack 進(jìn)行打包構(gòu)建的。
在項(xiàng)目中安裝webpack,需要先在終端運(yùn)行如下的命令,安裝 webpack 相關(guān)的兩個包:
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用來指定構(gòu)建模式??蛇x值有 development和 production }
② 在 package.json 的 scripts 節(jié)點(diǎn)下,新增 dev 腳本如下:
"scripts":{ “dev":“webpack"// script 節(jié)點(diǎn)下的腳本,可以通過 npm run 執(zhí)行。例如 npm run dev }
③ 在終端中運(yùn)行 npm run dev 命令,啟動 webpack 進(jìn)行項(xiàng)目的打包構(gòu)建。