javaweb項目實例案例，Node-webpack基本使用和詳細案例

2023-11-18 阅读 23 评论 0

摘要：webpack基本概念 webpack ：是前端項目工程化的具體解決方案。目前絕大部分的 Vue/React 等前端項目，都是基于 webpack 進行工程化開發的。 webpack基本使用 ① 新建項目空白目錄，并運行 npm init –y 命令，初始化包管理配置文件 package.json ②

webpack基本概念

webpack ：是前端項目工程化的具體解決方案。目前絕大部分的 Vue/React 等前端項目，都是基于 webpack 進行工程化開發的。

webpack基本使用

① 新建項目空白目錄，并運行 npm init –y 命令，初始化包管理配置文件 package.json
② 新建 src 源代碼目錄和 public 靜態資源目錄
③ 新建 public -> index.html 首頁和 src -> index.js 腳本文件
④ 初始化首頁基本的結構
⑤ 運行 npm install jquery –S 命令，安裝 jQuery
⑥ 通過 ES6 模塊化的方式導入 jQuery，實現頁面效果
⑦安裝：
在終端運行如下的命令，安裝 webpack 相關的兩個包：
npm install webpack@5.58.2 webpack-cli@4.9.0 --save-dev
⑧配置：

在項目根目錄中，創建名為 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：
在 package.json 的 scripts 節點下，新增 dev 腳本如下：

javaweb項目實例案例，⑨運行：
在終端中運行 npm run dev 命令，啟動 webpack 進行項目的打包構建

案例：

給偶數< li>添加背景顏色紅色
① 新建項目空白目錄，并運行 npm init –y 命令，初始化包管理配置文件 package.json
在這里插入圖片描述

② 新建 src 源代碼目錄和 public 靜態資源目錄
③ 新建 public -> index.html 首頁和 src -> index.js 腳本文件

④ 初始化首頁基本的結構（寫一些功能）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><ul><li>這是第1個li</li><li>這是第2個li</li><li>這是第3個li</li><li>這是第4個li</li><li>這是第5個li</li><li>這是第6個li</li><li>這是第7個li</li><li>這是第8個li</li><li>這是第9個li</li></ul>
</body>
</html>