如何搭建webpack react
安装 Node.js 和 npm
确保系统已安装 Node.js（包含 npm）。可以通过官网下载并安装最新版本。安装完成后，运行以下命令验证安装是否成功：
node -v
npm -v初始化项目
创建一个新目录并进入，通过 npm 初始化项目：
mkdir react-webpack-app
cd react-webpack-app
npm init -y安装 React 和 React DOM
安装 React 及其依赖：
npm install react react-dom安装 Webpack 和相关工具
安装 Webpack、Webpack CLI 及必要的加载器和插件：
npm install webpack webpack-cli webpack-dev-server --save-dev
npm install babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
npm install html-webpack-plugin css-loader style-loader --save-dev配置 Babel
创建 .babelrc 文件，配置 Babel 预设：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}配置 Webpack
创建 webpack.config.js 文件，配置入口、输出、加载器和插件：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
devServer: {
static: path.join(__dirname, 'dist'),
port: 3000,
open: true,
},
};创建项目结构
创建以下目录和文件：
react-webpack-app/
├── public/
│ └── index.html
├── src/
│ ├── App.js
│ └── index.js
├── .babelrc
└── webpack.config.jspublic/index.html 内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Webpack App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>src/index.js 内容：
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);src/App.js 内容：
import React from 'react';
function App() {
return <h1>Hello, React with Webpack!</h1>;
}
export default App;添加启动脚本
在 package.json 的 scripts 部分添加以下命令：
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
}启动开发服务器
运行以下命令启动开发服务器：
npm start浏览器会自动打开 http://localhost:3000，显示 React 应用。
构建生产版本
运行以下命令生成优化后的生产版本：
npm run build构建结果会保存在 dist 目录中。
