从零搭建React开发环境：手动配置Webpack与Babel

作者：测试手账时间：2026-10-22 17:19:04浏览：657

本文详细记录了从零手动搭建React开发环境的过程，旨在替代官方create-react-app的复杂配置。内容涵盖npm仓库加速、Webpack4模式指定、Babel语法转换及antd按需加载等核心依赖的配置，并提供了完整的package.json与webpack配置文件示例，帮助开发者快速掌握前端构建工具链的基础用法。

写在前面

手动搭建React环境的目的与背景

为了深入学习React和Webpack的相关知识，考虑到官方脚手架的配置过于繁琐，我决定尝试手动搭建一个开发环境。整个过程参考了从零搭建React全家桶框架的教程，整体步骤大致相同。

与Vue和Angular类似，React也提供了专门的脚手架工具，这极大地简化了开发流程。React官方推荐的脚手架工具是create-react-app。

安装脚手架与npm仓库配置

安装脚手架工具

通过npm下载create-react-app，执行以下命令：


npm install -g create-react-app

由于国内访问npm仓库速度较慢或经常下载失败，可以指定镜像源进行下载：


npm install -g create-react-app --registry https://registry.npm.taobao.org

或者，直接配置npm的默认仓库地址：


npm config set registry https://registry.npm.taobao.org

项目依赖总览与Webpack4配置要点

第一步：依赖总览

目前项目处于半成品阶段，主要完成了开发模式下的相关操作，包括添加babel、less支持以及antd的按需加载功能。整体的package.json配置如下：


    {
      "name": "myreact",
      "version": "1.0.0",
      "description": "test react",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --config config/webpack.base.config.js --hot --mode development"
      },
      "keywords": [
        "test",
        "react"
      ],
      "author": "xxxx",
      "license": "ISC",
      "devDependencies": {
        "autoprefixer": "^9.1.2",
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-plugin-import": "^1.8.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "css-loader": "^1.0.0",
        "html-webpack-plugin": "^3.2.0",
        "less": "^3.8.1",
        "less-loader": "^4.1.0",
        "postcss-import": "^12.0.0",
        "postcss-loader": "^3.0.0",
        "react-hot-loader": "^4.3.4",
        "style-loader": "^0.22.1",
        "webpack": "^4.16.5",
        "webpack-cli": "^3.1.0",
        "webpack-dev-server": "^3.1.5"
      },
      "dependencies": {
        "antd": "^3.8.2",
        "react": "^16.4.2",
        "react-dom": "^16.4.2",
        "react-router-dom": "^4.3.1"
      }
    }

当前配置的依赖中需要注意，Webpack4与早期版本可能存在差异（具体取决于是否注意到某些细节）。如果在script属性中通过CLI方式运行，需要安装webpack-cli；若通过命令行参数运行，则需安装webpack-command。当然，同时安装两者通常也不会出现问题。这是与参考教程中配置不同的地方。

此外，Webpack4需要明确指定production|development（production或development），因此我在dev脚本中使用了--mode development参数。这也是原教程中未提及的部分。

Babel语法转换与按需加载配置

关于Babel的配置

Babel的相关依赖包括babel-core,babel-loader,babel-preset-es2015,babel-preset-react,babel-preset-stage-0等。此外，你可能会注意到babel-plugin-import未被提及，该模块主要用于实现antd的按需加载。详细的.babelrc文件内容如下：


{
  "presets": [
   "es2015",
   "react",
   "stage-0"
  ],
  "plugins": [
    "react-hot-loader/babel",
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
   ]
 }

上述为Babel的配置，presets字段包含三个模块：es2015用于处理ES6语法，react用于处理JSX语法，stage-0用于支持最新语言特性。

在plugins配置中，react-hot-loader/babel用于实现热更新且保持状态，这一点教程中已有说明。下方的import配置对应前文提到的babel-plugin-import，这是antd官方推荐的按需加载配置方式。

另外需要指出，部分新特性可能支持不足。例如，若需使用async/await语法，可能需要额外安装babel-plugin-transform-runtime模块。同时，babelrc文件中的plugins部分还需配置"transform-runtime"插件，以支持这些新特性。

依赖相关的配置就介绍到这里。

Webpack核心配置与功能限制

Webpack的配置

我在根目录下的config目录中创建了webpack.dev.config.js,，具体配置如下：


const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 
  /*入口*/
  entry: ['react-hot-loader/patch',path.join(__dirname, '../src/index.js')],
  
  /*输出到dist文件夹，输出文件名字为bundle.js*/
  output: {
    path: path.join(__dirname, '../dist'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.join(__dirname, '../dist'),
    historyApiFallback: true
  },
  module: {
    rules: [{
      test: /\.js[x]?$/,
      use: ['babel-loader?cacheDirectory=true'],
      include: path.join(__dirname, '../src')
    },{
      test: /\.css$/,
      use: ['style-loader','css-loader','postcss-loader'],
      
    },
    {
      test: /\.less$/,
      use:[ 'style-loader',
        {loader: 'css-loader',options:{importLoaders:1}}, 
       'less-loader'],
      
    }]
  },
  plugins:[new HtmlWebpackPlugin({
    title:'react测试',
    template:'./src/index.html',
    filename:'./dist/index.html'
  })],
  devtool: 'inline-source-map',
  resolve:{
    alias: {
      "@":path.join(__dirname, '../src/')
    }
  }

};

这部分配置相对简单，主要涉及loader的配置。目前完成了js(x)和css/less的处理，以及其他常规CLI配置，暂未包含url-loader,file-loader和代码分割等功能。

总结

目前的配置较为简陋，功能尚不完善，后续仍需完善许多工作。不过，自己动手实践确实能带来不少收获……

项目的GitHub地址为diy-react-cli，欢迎大家访问交流！

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

作者最新文章

Mock.js 与 MSW、YApi 对比：前端接口模拟工具怎么选

2026-11-04 22:55:05

Turf.js 安装与引入：NPM 打包及 CDN 快速上手指南

2026-11-03 23:23:32

JS代码混淆后无法调试？Source Map配置与浏览器断点技巧

2026-11-03 14:12:17