Webpack介紹和基本使用指南
更新時間：2024年02月21日 10:55:52 作者：小秀_heo
Webpack 本身功能比較少,只能處理 js 資源,一旦遇到 css 等其他資源就會報錯,本文給大家講解Webpack介紹和基本使用指南,感興趣的朋友一起看看吧
基本使用
1. 資源目錄
webpack_code # 項目根目錄（所有指令必須在這個目錄運行）
└── src # 項目源碼目錄
├── js # js文件目錄
│ ├── count.js
│ └── sum.js
└── main.js # 項目主文件2. 創(chuàng)建文件
count.js
export default function count(x, y) {
return x - y;
}sum.js
export default function sum(...args) {
return args.reduce((p, c) => p + c, 0);
}main.js
import count from "./js/count"; import sum from "./js/sum"; console.log(count(2, 1)); console.log(sum(1, 2, 3, 4));
3. 下載依賴
打開終端，來到項目根目錄。運行以下指令：
初始化package.json
npm init -y
此時會生成一個基礎(chǔ)的 package.json 文件。
需要注意的是 package.json 中 name 字段不能叫做 webpack, 否則下一步會報錯
下載依賴
npm i webpack webpack-cli -D
4. 啟用 Webpack 開發(fā)模式
npx webpack ./src/main.js --mode=development
生產(chǎn)模式
npx webpack ./src/main.js --mode=production
npx webpack: 是用來運行本地安裝 Webpack 包的。
./src/main.js: 指定 Webpack 從 main.js 文件開始打包，不但會打包 main.js，還會將其依賴也一起打包進來。
--mode=xxx：指定模式（環(huán)境）。
5. 觀察輸出文件
默認 Webpack 會將文件打包輸出到 dist 目錄下，我們查看 dist 目錄下文件情況就好了
Webpack 本身功能比較少，只能處理 js 資源，一旦遇到 css 等其他資源就會報錯。
所以我們學習 Webpack，就是主要學習如何處理其他資源。
概述
Webpack：
1.兩種開發(fā)模式
- 開發(fā)模式：代碼能編譯自動化運行
- 生產(chǎn)模式：代碼編譯優(yōu)化輸出
2.Webpack 基本功能
- 開發(fā)模式：可以編譯 ES Module 語法
- 生產(chǎn)模式：可以編譯 ES Module 語法，壓縮 js 代碼
3.Webpack 配置文件
5 個核心概念
- entry
- output
- loader
- plugins
- mode
devServer 配置
4.Webpack 腳本指令用法
- webpack 直接打包輸出
- webpack serve 啟動開發(fā)服務(wù)器，內(nèi)存編譯打包沒有輸出
到此這篇關(guān)于Webpack基本使用和概述的文章就介紹到這了,更多相關(guān)Webpack基本使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript獲取表單enctype屬性的方法,涉及javascript操作表單屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
JavaScript中for循環(huán)與forEach的區(qū)別詳解
最近在代碼審查中發(fā)現(xiàn),團隊成員對數(shù)組遍歷方式的選擇存在不少困惑,有人堅持使用傳統(tǒng)的for循環(huán),有人則偏愛forEach方法,雙方各執(zhí)一詞,今天,我們就來深入探討這個問題,幫助你在實際開發(fā)中做出更合理的選擇,需要的朋友可以參考下2025-04-04
目前為止,就我的猜測,javascript執(zhí)行應(yīng)該是先做語法分析,然后順便分析完成了變量表(本地和全局)2011-09-09
這篇文章主要為大家分享了非?？犰诺腂ootstrap圖片輪播動畫，幾行jQuery和animate.css庫用在基本的Bootstrap輪播組件中，感興趣的小伙伴們可以參考一下2016-05-05
下面小編就為大家?guī)硪黄狫avaScript操作選擇對象的簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
JS鼠標事件大全 推薦收藏，整理的比較細，推薦大家看下。2011-11-11
本文主要介紹了Next.js SSR 項目生產(chǎn)部署全攻略,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2026-03-03
JavaScript中類型的強制轉(zhuǎn)換與隱式轉(zhuǎn)換詳解
類型強制Coercion是將值從一種類型轉(zhuǎn)換為另一種類型的過程（例如字符串轉(zhuǎn)換為數(shù)字,對象轉(zhuǎn)換為布爾值等）,下面這篇文章主要給大家給大家介紹了JavaScript中類型的強制轉(zhuǎn)換與隱式轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2021-08-08
3D球狀標簽云的效果想必很多朋友在瀏覽網(wǎng)頁時都有見到過吧，看起來提復雜的，其實實現(xiàn)起來挺容易的，感興趣的朋友可以了解下本文2013-12-12
這篇文章主要為大家詳細介紹了基于ssm框架實現(xiàn)layui分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07