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(<App />);
\ 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 @@
+<body>
+ <div id="root"></div>
+</body>
+<script src="/main.js"></script>
\ 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 (
+ <h1>
+ 从 Webpack 和 Babel 开始搭建 React 项目
+ </h1>
+ )
+}
\ 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