❤ React实战项目从0到1搭建（仅供参考Webpack5+Gitee源码）
一、基础篇
1、检查本地环境
node版本 20.10.0
检查node和npm环境
node -v
npm -v
2、安装yarn
npm install -g yarn
yarn --version //1.22.21
3、使用yarn搭建一个新的React项目
目录结构
你的目录结构应该如下：
├── src
│ └── index.js
└── index.html
├── webpack.config.js
├── .babelrc
├── package.json
（1）创建项目
mkdir ReactWebpack //创建空文件夹
cd ReactWebpack //进入
yarn init //yarn 初始化
（2）配置 react 核心依赖包
（react核心）
（1 2 3）
yarn add react //安装react
yarn add react-dom //安装react-dom
yarn add react-router-dom //安装react路由
yarn add react react-dom react-router-dom （合并以后）
关于TS的配置我们可以之后逐步添加完善，从基础开始，不断进化
// yarn add add -D @types/react @types/react-dom (不采用)
// yarn add typescript -D // 配置 `TypeScript` （不采用）
// tsc --init //直接通过 tsc 命令生成一个 `tsconfig.json` 的配置文件 （不采用）
（3）安装webpack
// webpack
yarn add webpack webpack-cli //安装webpack和wenpack脚手架
yarn add webpack-dev-server //实时重新加载
yarn add html-webpack-plugin //简化使用 webpack 构建项目时生成 HTML 文件的过程
yarn add clean-webpack-plugin //清除打包文件
（4）安装 Babel
React 使用 JSX 语法，需要通过 Babel 转译成标准的 JavaScript。安装 Babel 相关依赖：
yarn add babel-loader @babel/core @babel/preset-react @babel/preset-env --save-dev
（5）配置项目配置
index.js
//React 16
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<React.StrictMode>
<div>你好，React-webpack5</div>
</React.StrictMode>,
document.getElementById('root')
);
//React 18
import React from 'react';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<><div>你好，React-webpack5</div></>);
问题处理
React16到18写法变了
index.js更改如下
//React 16
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<React.StrictMode>
<div>你好，React-webpack5</div>
</React.StrictMode>,
document.getElementById('root')
);
//React 18
import React from 'react';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<><div>你好，React-webpack5</div></>);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
.babalrc 配置 Babel
在项目根目录创建一个名为 .babelrc 的文件，并配置 Babel 的预设
{
"presets": ["@babel/preset-react"]
}
package.json
添加如下 script：
"scripts": {
"build": "webpack --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack serve --config webpack.config.js"
}
webpack.config.js
配置webpack
在项目根目录中创建一个名为 webpack.config.js 的配置文件，配置 Webpack
touch webpack.config.js //新建一个webpack的配置文件：webpack.config.js
webpack.config.js内容
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = (env) => {
return {
mode: "development",
entry: {
index: './src/index.js'
},
output: {
// 打包文件根目录
path: path.resolve(__dirname, "dist/"),
},
plugins: [
// 生成 index.html
new HtmlWebpackPlugin({
filename: "index.html",
template: "./src/index.html",
}),
],
module: {
rules: [
{
test: /\.(jsx|js)?$/,
use: ["babel-loader"],
include: path.resolve(__dirname, 'src'),
},
]
},
devServer: {
port: 8080,
host: '0.0.0.0',
},
}
}
4、 运行
yarn dev 就可以直接运行了，由于我们上面设置的 devServer 端口号为 8080，所以在浏览器中打开 http://localhost:8080/ 即可看到如下效果：
5、打包
package.json里面配置的部分
"scripts": {
"build": "webpack --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack serve --config webpack.config.js"
}
打包命令
yarn build
yarn build打包完成以后能在我们项目里面看到一个包dist
二、Webpack5 + React搭建进阶篇
6、安装 webpack-merge (为后续环境准备)
yarn add webpack-merge --save
开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。
遵循不重复原则(Don’t repeat yourself – DRY)，保留一个“通用”配置。为了将这些配置合并在一起，我们将使用一个名为 webpack-merge 的工具。通过“通用”配置，我们不必在环境特定(environment-specific)的配置中重复代码。
7、config 文件夹配置不同开发环境
在根目录下新建一个文件夹名为 config 用于存放配置文件，在此文件夹下创建三个 .js 文件
- webpack.common.config.js — 公共配置文件
- webpack.prod.config.js — 生产环境配置文件
- webpack.dev.config.js — 开发环境配置文件
ReactWebpack
+ |- config
+ |- webpack.common.config.js
+ |- webpack.dev.config.js
+ |- webpack.prod.config.js
|- node_modules
+ |- src
|- index.js
|- package.json
配置 webpack.common.config.js
目的是为了开发环境中配置公共的路径和地址：
const path = require('path');
module.exports = {
entry: {
app: './src/index.js',
},
output: {
filename: 'js/bundle.js',
path: path.resolve(__dirname, '../dist'),
},
};
entry入口文件路径，output编译打包之后的文件名以及所在路径
配置打包路径
"scripts": {
// "build": "webpack --config webpack.config.js",
"build": "webpack --config ./config/webpack.common.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack serve --config webpack.config.js",
}
配置webpack.prod.config.js
文件中使用webpack-merge来进行文件合并，减少重复
const { merge } = require('webpack-merge');
const common = require('./webpack.common.config.js');
module.exports = merge(common, {
mode: 'production',
});
原文链接：https://juejin.cn/post/7347504184067407907 作者：林太白
