当前位置：首页 > React

如何搭建webpack react

2026-01-24 03:02:14React

安装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预设：

如何搭建webpack react

{
  "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内容：

如何搭建webpack react


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"
}