首頁技術(shù)文章正文

什么是webpack?如何在項目中安裝配置webpack?

更新時間:2023-08-02 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

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

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

在項目中安裝webpack,需要先在終端運行如下的命令,安裝 webpack 相關(guān)的兩個包:

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

在項目中配置 webpack

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

module.exports ={
   mode:'development'// mode用來指定構(gòu)建模式??蛇x值有 development和 production
}

② 在 package.json 的 scripts 節(jié)點下,新增 dev 腳本如下:

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

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

分享到:
在線咨詢 我要報名
和我們在線交談!