文章目录
一、基础开发环境搭建
1. 新建项目目录
mkdir example #创建项目目录
cd example #进入项目目录
npm init -y #生成 package.jsom
2. 项目目录结构及内容
example # 项目目录
├── public # 静态公用目录
│ └── index.html # html模板
├── src # 源代码目录
│ ├── pages # 页面目录
│ │ └── home # 主页目录
│ │ └── index.js # 主页代码
│ └── index.js # React 入口代码
└── package.json
- public/index.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：首页
import React from 'react'; //引入 react function Home() { return (<div>Hello, World!</div>) } export default Home; - src/index.js：React 的入口文件
'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
# 安装 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
example # 项目目录 ├── public # 静态公用目录 │ └── index.html # html模板 ├── src # 源代码目录 │ ├── pages # 页面目录 │ │ └── home # 主页目录 │ │ └── index.js # 主页代码 │ └── index.js # React 入口代码 ├── .babelrc # babel配置文件 新增 ├── webpack # webpack配置目录 新增 │ └── dev.js # 开发环境配置文件 新增 └── package.json - 新建文件 .babelrc
{ "plugins": ["@babel/syntax-dynamic-import"], "presets": [ [ "@babel/preset-env", { "modules": false } ], "@babel/preset-react" ] } - 新建 webpack/dev.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” 下添加运行和构建命令
{ "scripts": { "dev": "webpack serve -c webpack/dev.js", "build:dev": "webpack -c webpack/dev.js" } } - 用 npm 执行脚本命令
npm run dev # 调试项目 npm run build # 构建项目
