From 70763da9b060b3ff109e1d013e589f01cb452381 Mon Sep 17 00:00:00 2001
From: amass <168062547@qq.com>
Date: Mon, 17 Mar 2025 18:48:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0web=E5=88=9D=E5=A7=8B?=
=?UTF-8?q?=E5=8C=96=E4=BB=A3=E7=A0=81=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.gitignore | 2 ++
Frontend/index.jsx | 6 ++++++
Frontend/package.json | 27 +++++++++++++++++++++++++++
Frontend/public/index.html | 4 ++++
Frontend/src/App.jsx | 9 +++++++++
Frontend/webpack.config.js | 36 ++++++++++++++++++++++++++++++++++++
6 files changed, 84 insertions(+)
create mode 100644 Frontend/index.jsx
create mode 100644 Frontend/package.json
create mode 100644 Frontend/public/index.html
create mode 100644 Frontend/src/App.jsx
create mode 100644 Frontend/webpack.config.js
diff --git a/.gitignore b/.gitignore
index 088380b..590eab1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,5 @@ target_wrapper.*
CMakeLists.txt.user*
.idea
build
+Frontend/node_modules
+Frontend/package-lock.json
diff --git a/Frontend/index.jsx b/Frontend/index.jsx
new file mode 100644
index 0000000..308a675
--- /dev/null
+++ b/Frontend/index.jsx
@@ -0,0 +1,6 @@
+import React from "react";
+import { createRoot } from 'react-dom/client';
+import App from "./src/App.jsx"
+
+const root = createRoot(document.getElementById('root'));
+root.render();
\ No newline at end of file
diff --git a/Frontend/package.json b/Frontend/package.json
new file mode 100644
index 0000000..a8eb219
--- /dev/null
+++ b/Frontend/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "frontend",
+ "version": "1.0.0",
+ "main": "index.js",
+ "scripts": {
+ "start": "webpack-dev-server .",
+ "build": "webpack .",
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "author": "amass",
+ "license": "ISC",
+ "description": "",
+ "dependencies": {
+ "@babel/cli": "^7.26.4",
+ "@babel/core": "^7.26.10",
+ "@babel/plugin-transform-runtime": "^7.26.10",
+ "@babel/preset-env": "^7.26.9",
+ "@babel/preset-react": "^7.26.3",
+ "@babel/runtime": "^7.26.10",
+ "babel-loader": "^10.0.0",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "webpack": "^5.98.0",
+ "webpack-cli": "^6.0.1",
+ "webpack-dev-server": "^5.2.0"
+ }
+}
\ No newline at end of file
diff --git a/Frontend/public/index.html b/Frontend/public/index.html
new file mode 100644
index 0000000..16cad49
--- /dev/null
+++ b/Frontend/public/index.html
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
new file mode 100644
index 0000000..eff294f
--- /dev/null
+++ b/Frontend/src/App.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function App() {
+ return (
+
+ 从 Webpack 和 Babel 开始搭建 React 项目
+
+ )
+}
\ No newline at end of file
diff --git a/Frontend/webpack.config.js b/Frontend/webpack.config.js
new file mode 100644
index 0000000..000404d
--- /dev/null
+++ b/Frontend/webpack.config.js
@@ -0,0 +1,36 @@
+const path = require("path");
+
+module.exports = {
+ mode: "development", // or "production",
+ entry: "./index.jsx",
+ output: {
+ path: path.resolve(__dirname, "public"),
+ filename: "main.js"
+ },
+ target: "web",
+ devServer: {
+ static: {
+ directory: path.join(__dirname, 'public'),
+ },
+ host: "127.0.0.1",
+ port: "9000",
+ open: true,
+ hot: true,
+ liveReload: true
+ },
+ resolve: {
+ extensions: ['.js', '.jsx', '.json']
+ },
+ module: {
+ rules: [
+ {
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ loader: 'babel-loader',
+ options: {
+ presets: ["@babel/preset-react"]
+ }
+ }
+ ]
+ }
+}
\ No newline at end of file