当前位置：首页 > React > React 项目迁移 Webpack Babel7 的实现

React 项目迁移 Webpack Babel7 的实现

作者：星野时间：2026-10-22 17:44:55浏览：151

本文详细记录了 React 项目从初始化到配置 Webpack 4 和 Babel 7 的完整过程。内容涵盖 webpack-cli 安装、Babel 预设配置、React 组件开发、html-loader 集成以及 webpack-dev-server 的使用，旨在帮助开发者快速搭建现代化的前端构建环境。

项目初始化与依赖安装

此前曾撰写过关于 webpack 4 升级迁移的文章，此处简要介绍 React 项目的具体配置方法。

首先创建名为 react-web 的项目目录，并进入该目录执行初始化操作以生成 package.json 文件。


cd react-web && npm init

随后安装 webpack，需注意命令行工具已单独分离，因此除 webpack 外还需安装 webpack-cli。


npm i webpack webpack-cli --save-dev

接下来安装与 React 开发相关的依赖包。


npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

Babel 配置

开始初始化 Babel 的配置文件。


touch .babelrc

将以下内容粘贴至配置文件中。


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

Webpack 配置

虽然 webpack 4 支持无配置构建，但为遵循传统习惯，我们手动编写配置文件 webpack.config.js。


module.exports = { 
 module: {
 rules: [
  {
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
   loader: "babel-loader"
  }
  }
 ]
 }
};

React 组件开发

接下来处理与 React 组件相关的内容。


npm i react-dom react prop-types --save-dev

在 src 目录下新建 components 目录。

分别创建 Header.js 和 Footer.js 两个文件。

Footer.js 的代码如下。


import React, { Component } from "react";

class Footer extends Component { 
 constructor() {
 super();
 this.state = {
  year: "2018"
 };
 }
 render() {
 return (
  <footer class="ft">
   copyright © {this.state.year}
  </footer>
 );
 }
}
export default Footer;

Header.js 的代码如下。


import React, { Component } from "react"; 
import ReactDOM from "react-dom"; 
class Header extends Component { 
 constructor() {
 super();
 this.state = {
  year: "2018"
 };
 }
 render() {
 return (
  <header class="hd">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Logo</a>
   <ul class="pull-right">
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link1</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link2</a></li>
   </ul>
  </header>
 );
 }
}
export default Header;

新增文件 src/index.js 作为入口文件。


import React, { Component } from "react"; 
import ReactDOM from "react-dom"; 
import Header from "../src/components/Header"; 
import Footer from "../src/components/Footer";

class ReactApp extends Component { 
 constructor() {
 super();
 }


 render() {
 return (
  <div class="main">
   <Header></Header>
   <Footer></Footer>
  </div>
 );
 }
}

ReactDOM.render(<ReactApp />, document.getElementById('react-app'));

export default ReactApp;

HTML 处理与预览服务器

为了预览页面，需要引入 html-loader 插件。


npm i html-webpack-plugin html-loader --save-dev

修改 webpack 配置文件以包含相关规则。


const HtmlWebPackPlugin = require("html-webpack-plugin"); 
module.exports = { 
 module: {
 rules: [
  {
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
   loader: "babel-loader"
  }
  },
  {
  test: /\.html$/,
  use: [
   {
   loader: "html-loader"
   }
  ]
  }
 ]
 },
 plugins: [
 new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html"
 })
 ]
};

在 src 目录下新建 index.html 并添加相应内容。


<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="external nofollow" >
 <title>React & Webpack4</title>
</head> 
<body> 
 <div class="container">
  <div class="row mt-5">
   <div class="col-md-4 offset-md-1">
    <p>Create a new article</p>
    <div id="react-app">
    </div>
   </div>
  </div>
 </div>
</body> 
</html>

安装 webpack-dev-server，用于在开发阶段启动服务器进行预览。


npm i webpack-dev-server --save-dev

修改 npm scripts 脚本配置。


"scripts": {
 "start": "webpack-dev-server --open --mode development",
 "build": "webpack"
}

后续步骤与参考资源

目前基础部分已完成，后续可根据需要安装其他 React 相关套件。

若觉得手动配置繁琐，可直接使用 yarn-react-webpack-seed 模板。

扩展阅读部分提供了相关资源链接。

参考链接包括 Valentinog 的博客、React Training 的 HashRouter API 文档以及 JackPu 的 yarn-react-webpack-seed 仓库。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

Next.js 数据获取：getServerSideProps 与新 fetch 缓存策略详解

2026-11-04 09:11:32

原生JavaScript与Vue/React对比：网站制作技术栈怎么选择

2026-11-03 19:56:26

Webpack实现条件组件按需加载的多种方案与实战

2026-10-31 21:16:54

Vue3定义组件的四种方式：SFC、渲染函数、JSX与函数式组件对比

2026-10-31 19:22:29

前端实现全局主题切换功能实例代码

2026-10-31 19:19:33

相关文章
更多