React 18 + Babel 7 + Webpack 5 开发环境搭建

文章目录

一、基础开发环境搭建
- [1. 新建项目目录](#1. 新建项目目录)
- [2. 项目目录结构及内容](#2. 项目目录结构及内容)
- [3. 安装 React 18 + Babel 7 + Webpack 5](#3. 安装 React 18 + Babel 7 + Webpack 5)
- [4. 配置 Babel 和 Webpack](#4. 配置 Babel 和 Webpack)
- [5. 调试/构建项目](#5. 调试/构建项目)
二、扩展项目支持的能力（待补充）
- [1. JS 扩展（待补充）](#1. JS 扩展（待补充）)
- [2. CSS 扩展（待补充）](#2. CSS 扩展（待补充）)
- [3. 热更新（待补充）](#3. 热更新（待补充）)
- [4. 按需加载（待补充）](#4. 按需加载（待补充）)
- [5. 第三方库的使用（待补充）](#5. 第三方库的使用（待补充）)
三、代码标准化（待补充）
- [1. 代码校验 ESLint（待补充）](#1. 代码校验 ESLint（待补充）)
四、代码发布（待补充）
- [1. 生产环境 webpack 配置（待补充）](#1. 生产环境 webpack 配置（待补充）)

一、基础开发环境搭建

1. 新建项目目录

shell 复制代码

mkdir example #创建项目目录
cd example #进入项目目录
npm init -y #生成 package.jsom

2. 项目目录结构及内容

返回目录

shell 复制代码

example # 项目目录
├── public # 静态公用目录
│   └── index.html # html模板
├── src # 源代码目录
│   ├── pages # 页面目录
│   │   └── home # 主页目录
│   │       └── index.js # 主页代码
│   └── index.js # React 入口代码
└── package.json

public/index.html ：html 模版"

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<!-- 移动端全屏 -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" />
	<meta name="theme-color" content="#000000" />
	<!-- 防止页面缓存 -->
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache">
	<meta http-equiv="Expires" content="0">
	<!-- 页面标题 html-webpack-plugin 插件替换 -->
	<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
	<!-- React根节点 -->
	<div id="root"></div>
</body>
</html>

src/pages/home/index.js ：首页

js 复制代码

import React from 'react'; //引入 react

function Home() {
	return (<div>Hello, World!</div>)
}

export default Home;

src/index.js ：React 的入口文件

js 复制代码

'use strict';
import React from 'react'; //引入 react
import { createRoot } from 'react-dom/client';
import Home from '../src/pages/home'; //引入本项目的首页

//把首页渲染到 html 模版的 react 根节点上
const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(<Home />);

3. 安装 React 18 + Babel 7 + Webpack 5

返回目录

shell 复制代码

# 安装 React主程序  dom操作    路由
npm i -S react react-dom react-router-dom

# 安装babel
npm i -D @babel/core @babel/preset-env @babel/preset-react

# 安装 webpack主程序  支持命令行 本地开发用web服务 处理html插件
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin

# 安装 webpack加载器
$ npm i -D babel-loader css-loader style-loader

4. 配置 Babel 和 Webpack

返回目录

更新项目目录l

shell 复制代码

example # 项目目录
├── public # 静态公用目录
│   └── index.html # html模板
├── src # 源代码目录
│   ├── pages # 页面目录
│   │   └── home # 主页目录
│   │       └── index.js # 主页代码
│   └── index.js # React 入口代码
├── .babelrc # babel配置文件               新增
├── webpack # webpack配置目录              新增
│   └── dev.js # 开发环境配置文件           新增
└── package.json

新建文件 .babelrc

json 复制代码

{
  "plugins": ["@babel/syntax-dynamic-import"],
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ],
    "@babel/preset-react"
  ]
}

新建 webpack/dev.js ：开发环境配置文件

js 复制代码

// 引用库
const path = require('path');
const webpack = require('webpack');

// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 路径方法
const resolve = pathname => path.resolve(__dirname, `../${pathname}`);
const stylesHandler = MiniCssExtractPlugin.loader;

module.exports = {
	mode: 'development',
	entry: resolve('src/index.js'),
	output: {
		clean: true,
		filename: 'js/[name].[hash:5].bundle.js', //出口文件
		path: resolve('dist') //输出路径
	},
	devServer: {
		open: true,
		host: 'localhost',
	},
	plugins: [
		new HtmlWebpackPlugin({
			title: 'HTML页面标题', //替换index.html的title标签内容
			template: resolve('public/index.html'), //html模版的位置
		}),
		new MiniCssExtractPlugin({
			filename: 'css/[name].[contenthash:5].css',
			chunkFilename: 'css/[id].[contenthash:5]\'.css',
			ignoreOrder: false
		}),
	],
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/i,
				loader: 'babel-loader',
			},
			{
				test: /\.css$/i,
				use: [stylesHandler, 'css-loader'],
			},
			{
				test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
				type: 'asset',
			},
		],
	},
};

注意：loader 的加载顺序是从右往左，从下往上

5. 调试/构建项目

返回目录

修改 package.jsom，在 "scripts" 下添加运行和构建命令

json 复制代码

{
  "scripts": {
  	"dev": "webpack serve -c webpack/dev.js",
    "build:dev": "webpack -c webpack/dev.js"
  }
}

用 npm 执行脚本命令

shell 复制代码

npm run dev   # 调试项目
npm run build # 构建项目

二、扩展项目支持的能力（待补充）

返回目录

三、代码标准化（待补充）

返回目录

1. 代码校验 ESLint（待补充）

返回目录

四、代码发布（待补充）

1. 生产环境 webpack 配置（待补充）

返回目录

React 18 + Babel 7 + Webpack 5 开发环境搭建

文章目录

一、基础开发环境搭建

1. 新建项目目录

2. 项目目录结构及内容

3. 安装 React 18 + Babel 7 + Webpack 5

4. 配置 Babel 和 Webpack

5. 调试/构建项目

二、扩展项目支持的能力（待补充）

1. JS 扩展（待补充）

2. CSS 扩展（待补充）

3. 热更新（待补充）

4. 按需加载（待补充）

5. 第三方库的使用（待补充）

三、代码标准化（待补充）

1. 代码校验 ESLint（待补充）

四、代码发布（待补充）

1. 生产环境 webpack 配置（待补充）