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

Webpack介紹和基本使用指南

 更新時(shí)間：2024年02月21日 10:55:52   作者：小秀_heo  
Webpack 本身功能比較少,只能處理 js 資源,一旦遇到 css 等其他資源就會(huì)報(bào)錯(cuò),本文給大家講解Webpack介紹和基本使用指南,感興趣的朋友一起看看吧

基本使用

1. 資源目錄

webpack_code # 項(xiàng)目根目錄（所有指令必須在這個(gè)目錄運(yùn)行）
    └── src # 項(xiàng)目源碼目錄
        ├── js # js文件目錄
        │   ├── count.js
        │   └── sum.js
        └── main.js # 項(xiàng)目主文件

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. 下載依賴

打開(kāi)終端，來(lái)到項(xiàng)目根目錄。運(yùn)行以下指令：

初始化package.json

npm init -y

此時(shí)會(huì)生成一個(gè)基礎(chǔ)的 package.json 文件。

需要注意的是 package.json 中 name 字段不能叫做 webpack, 否則下一步會(huì)報(bào)錯(cuò)

下載依賴

npm i webpack webpack-cli -D

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

npx webpack ./src/main.js --mode=development

生產(chǎn)模式

npx webpack ./src/main.js --mode=production

npx webpack: 是用來(lái)運(yùn)行本地安裝 Webpack 包的。

./src/main.js: 指定 Webpack 從 main.js 文件開(kāi)始打包，不但會(huì)打包 main.js，還會(huì)將其依賴也一起打包進(jìn)來(lái)。

--mode=xxx：指定模式（環(huán)境）。

5. 觀察輸出文件

默認(rèn) Webpack 會(huì)將文件打包輸出到 dist 目錄下，我們查看 dist 目錄下文件情況就好了

Webpack 本身功能比較少，只能處理 js 資源，一旦遇到 css 等其他資源就會(huì)報(bào)錯(cuò)。

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

概述

Webpack：

1.兩種開(kāi)發(fā)模式

  • 開(kāi)發(fā)模式：代碼能編譯自動(dòng)化運(yùn)行
  • 生產(chǎn)模式：代碼編譯優(yōu)化輸出

2.Webpack 基本功能

  • 開(kāi)發(fā)模式：可以編譯 ES Module 語(yǔ)法
  • 生產(chǎn)模式：可以編譯 ES Module 語(yǔ)法，壓縮 js 代碼

3.Webpack 配置文件
5 個(gè)核心概念

  • entry
  • output
  • loader
  • plugins
  • mode

devServer 配置

4.Webpack 腳本指令用法

  • webpack 直接打包輸出
  • webpack serve 啟動(dòng)開(kāi)發(fā)服務(wù)器，內(nèi)存編譯打包沒(méi)有輸出

到此這篇關(guān)于Webpack基本使用和概述的文章就介紹到這了,更多相關(guān)Webpack基本使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論