如何搭建webpack react
安装Node.js和npm
确保系统已安装Node.js（包含npm）。可通过以下命令验证安装：
node -v
npm -v若未安装，需从Node.js官网下载并安装最新LTS版本。
创建项目目录并初始化
新建项目文件夹并进入目录，通过npm初始化项目：
mkdir react-webpack-app
cd react-webpack-app
npm init -y-y参数跳过交互式配置，直接生成默认的package.json文件。
安装React及相关依赖
安装React和React DOM作为项目依赖：
npm install react react-dom安装Webpack及配套工具
安装Webpack核心库、开发服务器及必要的插件和加载器：
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: ['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/
├── src/
│ └── index.js
├── public/
│ └── index.html
├── package.json
└── webpack.config.js-
public/index.html内容：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React App</title> </head> <body> <div id="root"></div> </body> </html> -
src/index.js内容：
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css';
const App = () =>
Hello, Webpack + React!
;ReactDOM.render(, document.getElementById('root'));
---
### 添加启动脚本
在`package.json`的`scripts`部分添加以下命令：
```json
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
}启动开发服务器
运行以下命令启动开发环境：
npm start浏览器将自动打开http://localhost:3000并显示应用。
生产环境构建
执行构建命令生成优化后的代码：
npm run build构建结果将输出到dist目录，可直接部署到服务器。
