使用webpack配置react项目

原创

小焱写作

发布于 2026-03-23 09:23:17

320

你想要通过手动配置 Webpack 来搭建一个完整的 React 项目，而不是使用 create-react-app 这类脚手架工具，核心是掌握 React 项目所需的 Webpack 核心配置和依赖。

一、配置前的准备

1. 初始化项目 & 安装核心依赖

首先创建项目并安装必要的包，打开终端执行以下命令：

bash

运行

# 创建项目文件夹并进入
mkdir webpack-react-demo && cd webpack-react-demo

# 初始化 package.json
npm init -y

# 安装核心依赖
npm install react react-dom

# 安装开发依赖（Webpack 及配套工具）
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react css-loader style-loader mini-css-extract-plugin --save-dev

2. 核心依赖说明

表格

依赖	作用
react/react-dom	React 核心库
webpack/webpack-cli	Webpack 核心及命令行工具
webpack-dev-server	开发环境热更新服务器
html-webpack-plugin	自动生成 HTML 文件并注入打包后的 JS
babel-loader/@babel/core	处理 ES6+ 和 React 的 JSX 语法转译
@babel/preset-env	适配不同浏览器的 ES6+ 转译
@babel/preset-react	转译 React 的 JSX 语法
css-loader/style-loader	处理 CSS 文件（开发环境）
mini-css-extract-plugin	抽离 CSS 为单独文件（生产环境）

二、完整的 Webpack 配置文件

在项目根目录创建 webpack.config.js，这是 Webpack 的核心配置文件，包含开发 / 生产环境的基础配置：

javascript

运行

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 判断环境：开发环境(development) / 生产环境(production)
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  // 入口文件
  entry: './src/index.js',
  
  // 输出配置
  output: {
    // 打包后的文件存放路径（绝对路径）
    path: path.resolve(__dirname, 'dist'),
    // 打包后的文件名（生产环境加哈希值防止缓存）
    filename: isProduction ? 'js/[name].[contenthash].js' : 'js/bundle.js',
    // 每次打包前清空 dist 目录
    clean: true,
  },

  // 模式：development(开发) / production(生产，会自动压缩代码)
  mode: isProduction ? 'production' : 'development',

  // 开发环境配置：热更新、source-map（方便调试）
  devtool: isProduction ? 'source-map' : 'inline-source-map',
  devServer: {
    // 开发服务器根目录
    static: path.join(__dirname, 'dist'),
    // 热更新
    hot: true,
    // 自动打开浏览器
    open: true,
    // 端口号
    port: 3000,
    // 路由刷新404时返回index.html（适配React Router）
    historyApiFallback: true,
  },

  // 模块规则（处理不同类型的文件）
  module: {
    rules: [
      // 1. 处理 JS/JSX 文件（Babel 转译）
      {
        test: /\.(js|jsx)$/,
        // 排除 node_modules 目录
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            // 预设：转译 ES6+ 和 React
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },

      // 2. 处理 CSS 文件
      {
        test: /\.css$/,
        use: [
          // 生产环境抽离 CSS，开发环境注入到页面
          isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
          // 解析 CSS 中的 import 和 url
          'css-loader',
        ],
      },

      // 3. 处理图片等静态资源（可选）
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          // 图片输出到 dist/assets 目录
          filename: 'assets/[name].[hash][ext]',
        },
      },
    ],
  },

  // 解析文件扩展名（导入时可省略后缀）
  resolve: {
    extensions: ['.js', '.jsx'],
  },

  // 插件配置
  plugins: [
    // 生成 HTML 文件
    new HtmlWebpackPlugin({
      // 模板 HTML（需手动创建）
      template: './public/index.html',
      // 输出的 HTML 文件名
      filename: 'index.html',
      // 压缩 HTML（生产环境）
      minify: isProduction ? {
        removeComments: true,
        collapseWhitespace: true,
      } : false,
    }),

    // 生产环境抽离 CSS 插件
    ...(isProduction ? [
      new MiniCssExtractPlugin({
        filename: 'css/[name].[contenthash].css',
      }),
    ] : []),
  ],
};

三、创建 Babel 配置文件

在项目根目录创建 .babelrc（或 babel.config.json），配置 Babel 预设：

json

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

四、创建项目基础文件

1. 公共 HTML 模板（public/index.html）

html

预览

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webpack + React</title>
</head>
<body>
  <!-- React 挂载节点 -->
  <div id="root"></div>
</body>
</html>

2. React 入口文件（src/index.js）

jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'; // 引入样式
import App from './App';

// 挂载 React 应用到 root 节点
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

3. 根组件（src/App.jsx）

jsx

import React from 'react';

function App() {
  return (
    <div className="app">
      <h1>Webpack + React 配置成功！</h1>
      <p>这是手动配置的 React 项目</p>
    </div>
  );
}

export default App;

4. 样式文件（src/index.css）

css

.app {
  text-align: center;
  margin-top: 50px;
}

h1 {
  color: #2c3e50;
}

p {
  color: #7f8c8d;
}

五、配置 npm 脚本

修改 package.json 中的 scripts 字段，添加开发 / 打包命令：

json

"scripts": {
  "start": "webpack serve --mode development",
  "build": "cross-env NODE_ENV=production webpack --mode production"
}

注意：cross-env 用于跨平台设置环境变量，需额外安装： bash 运行 npm install cross-env --save-dev

六、运行项目

bash

运行

# 启动开发服务器（热更新，端口 3000）
npm start

# 打包生产环境代码（输出到 dist 目录）
npm run build

总结

React + Webpack 配置的核心是：用 babel-loader 转译 JSX/ES6+，html-webpack-plugin 生成 HTML，webpack-dev-server 提供开发环境；
开发 / 生产环境需区分配置：开发环境用 style-loader 热更新 CSS，生产环境用 mini-css-extract-plugin 抽离 CSS 并加哈希值防缓存；
关键依赖不可少：@babel/preset-react 是解析 JSX 的核心，缺少会导致 JSX 语法报错。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

webpack

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

webpack

登录后参与评论

0 条评论

热度

使用webpack配置react项目

使用webpack配置react项目

一、配置前的准备

1. 初始化项目 & 安装核心依赖

2. 核心依赖说明

二、完整的 Webpack 配置文件

三、创建 Babel 配置文件

四、创建项目基础文件

1. 公共 HTML 模板（public/index.html）

2. React 入口文件（src/index.js）

3. 根组件（src/App.jsx）

4. 样式文件（src/index.css）

五、配置 npm 脚本

六、运行项目

总结

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐