快捷導(dǎo)航

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 等其他資源就會報錯。

所以我們學(xué)習(xí) Webpack，就是主要學(xué)習(xí)如何處理其他資源。

概述

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Webpack介紹和基本使用指南

目錄

基本使用

1. 資源目錄

2. 創(chuàng)建文件

3. 下載依賴

4. 啟用 Webpack 開發(fā)模式

5. 觀察輸出文件

概述

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具