基于 Webpack5 搭建一个 React 简易开发环境

前端梦呓 in Beijing

2022-12-03

工程化

React 开发环境脚手架，社区有很多

其中最著名的是 Create React App 简称 CRA

但我的需求只是基于 React + Webpack 搭建一个 Demo 测试环境

支持 React function component、支持热更新

用 CRA 有点大才小用，于是手动搭建一个，顺便熟悉下这些工具使用

# 准备一个 npm 项目

环境：建议安装 Nodejs 最新 LTS 版本

mkdir demo
cd demo
npm init -y

# 下载 webpack 相关包

npm i webpack -D
npm i webpack-cli -D
npm i webpack-dev-server -D

# webpack 配置及执行命令配置

项目根目录下创建 webpack.config.js
创建 src/index.js 目录文件
创建 server 入口目录文件 public/index.html，并开启 9892 端口，运行 Web 服务
package.json 的 scripts 中配置命令："dev": "webpack serve --open"

详情配置如下：

// webpack.config.js
const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    publicPath: '/vhost',
    filename: 'bundle.js'
  },
  devServer: {
    port: 9892,
    static: 'public'
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

运行 npm run dev 基于 webpack-dev-server 运行 Web 服务

端口号 9892

入口文件 public/index.html

webpack 通过 src/index.js 作为构建入口

构建产物为 bundle.js

publicPath 为 bundle.js 虚拟路径

最终在 index.html 通过 <script src="/vhost/bundle.js"></script> 引入

接下来所有的编程在 index.js 中完成

webpack-dev-server 自带热更新能力，所以这里不需要单独配置

# 下载 React 包

npm i react
npm i react-dom

值得注意的是只下载 react 包是不可以的

它不包含运行环境，这里是浏览器所需要的接口

在浏览器环境下还要下载 react-dom

# 支持 React jsx 语法

到这里，使用 function component 编程依然报错

因为 jsx 语法在 js 中不支持

所以要下载对应的 babel-loader 及相关的 babel 插件

npm i babel-loader -D
npm i @babel/preset-env -D
npm i @babel/preset-react -D
在根目录下创建 babel.config.json 添加对应的 babel 配置

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

1
2
3
4
5
6
7

# 启动项目

index.js 中编写 React 相关代码
执行 npm run dev
自动在默认浏览器中打开一个 http://localhost:9892/ 页面

# 小结

动手搭建之前，大概知道相关流程

也从网络上搜索相关的教程，但发现都不完整或者教程太老

因为 webpack5 与之前的版本配置还是有差异的，所以照搬就各种报错

于是自己参考了 webpack 官网及相关的 babel react 教程将开发环境搭建完成了

过程花费 2 小时左右，有不少的收获：

react 只是一个公共接口包，不同的环境要下载不同的环境包，比如浏览器中下载 react-dom
webpack-dev-server 支持热更新的，直接通过配置完成，不需要过多的处理
react jsx 的支持需要结合 babel 才能做到，js 中不支持 jsx 语法

上述所有的配置都是比较零散的，这里有一个完整的项目示例 (opens new window)

扫一扫，微信中打开