从零搭建企业级React项目全攻略

一、项目初始化

打开终端执行以下命令：

# 创建项目文件夹
mkdir react-project
cd react-project

# 初始化package.json（-y参数使用默认配置）
npm init -y
安装核心依赖：


bash
# 安装React核心库（生产依赖）
npm install react react-dom

# 安装开发工具链（开发依赖）
npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader @types/react @types/react-dom html-webpack-plugin css-loader style-loader postcss postcss-loader postcss-preset-env

# 安装路由和状态管理
npm install react-router-dom @reduxjs/toolkit react-redux

依赖说明：

webpack 是模块打包工具，负责代码编译和打包
typescript 为项目添加类型系统
react-router-dom 实现前端路由功能
@reduxjs/toolkit 是Redux官方推荐的最佳实践工具

二、项目结构设计

├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── features/       # 按功能模块划分
│   ├── pages/          # 页面组件
│   ├── routes/         # 路由配置
│   ├── store/          # Redux store
│   ├── types/          # 全局类型定义
│   ├── App.tsx
│   └── index.tsx
├── webpack.config.js
├── tsconfig.json
└── package.json

结构优势：

• 功能模块化便于团队协作
• 页面与组件分离提升可维护性
• 独立路由配置方便权限管理
• Redux状态管理清晰
• 路径别名简化导入路径
• 热更新支持开发效率

三、Webpack配置详解

创建 webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   
  mode: 'development',
  entry: './src/index.tsx',
  output: {
   
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash].js',
    publicPath: '/',
    clean: true,
  },
  devServer: {
   
    historyApiFallback: true,
    static: {
   
      directory: path.join(__dirname, 'public'),
    }