腳本之家服務器常用軟件

快捷導航

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

此時會生成一個基礎的 package.json 文件。

需要注意的是 package.json 中 name 字段不能叫做 webpack, 否則下一步會報錯

下載依賴

npm i webpack webpack-cli -D

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

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

生產模式

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ā)模式：代碼能編譯自動化運行
生產模式：代碼編譯優(yōu)化輸出

2.Webpack 基本功能

開發(fā)模式：可以編譯 ES Module 語法
生產模式：可以編譯 ES Module 語法，壓縮 js 代碼

3.Webpack 配置文件
5 個核心概念

entry
output
loader
plugins
mode

devServer 配置

4.Webpack 腳本指令用法

webpack 直接打包輸出
webpack serve 啟動開發(fā)服務器，內存編譯打包沒有輸出

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

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Webpack介紹和基本使用指南

目錄

基本使用

1. 資源目錄

2. 創(chuàng)建文件

3. 下載依賴

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

5. 觀察輸出文件

概述

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具