❤ React实战项目从0到1搭建（仅供参考Webpack5+Gitee源码）

一、基础篇

1、检查本地环境

node版本 20.10.0 检查node和npm环境

js 复制代码

node -v
npm -v

2、安装yarn

js 复制代码

npm install -g yarn
yarn --version //1.22.21

3、使用yarn搭建一个新的React项目

目录结构

你的目录结构应该如下：

js 复制代码

├── src
│   └── index.js
    └── index.html
├── webpack.config.js
├── .babelrc
├── package.json

（1）创建项目

bash 复制代码

mkdir ReactWebpack //创建空文件夹
cd ReactWebpack //进入
yarn init //yarn 初始化

（2）配置 react 核心依赖包

js 复制代码

（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的配置我们可以之后逐步添加完善，从基础开始，不断进化

js 复制代码

// yarn add add -D @types/react @types/react-dom (不采用)
// yarn add typescript -D // 配置 `TypeScript` （不采用）
// tsc --init //直接通过 tsc 命令生成一个 `tsconfig.json` 的配置文件 （不采用）

（3）安装webpack

js 复制代码

// 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 相关依赖：

js 复制代码

yarn add babel-loader @babel/core @babel/preset-react @babel/preset-env  --save-dev

（5）配置项目配置

index.js

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更改如下

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

js 复制代码

<!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 的预设

js 复制代码

{
  "presets": ["@babel/preset-react"]
}

package.json

添加如下 script：

js 复制代码

"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

js 复制代码

touch webpack.config.js  //新建一个webpack的配置文件：webpack.config.js

webpack.config.js内容

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里面配置的部分

js 复制代码

 "scripts": {
    "build": "webpack --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve --config webpack.config.js"
  }

打包命令

js 复制代码

yarn build

yarn build打包完成以后能在我们项目里面看到一个包dist

二、Webpack5 + React搭建进阶篇

6、安装 webpack-merge (为后续环境准备)

js 复制代码

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 -- 开发环境配置文件

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

目的是为了开发环境中配置公共的路径和地址：

js 复制代码

const path = require('path');
module.exports = {
  entry: {
    app: './src/index.js',
  },
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, '../dist'),
  },
};

entry入口文件路径，output编译打包之后的文件名以及所在路径

配置打包路径

js 复制代码

"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来进行文件合并，减少重复

js 复制代码

const { merge } = require('webpack-merge');
const common = require('./webpack.common.config.js');
module.exports = merge(common, {
  mode: 'production',
});

❤ React项目搭建（仅供参考Webpack5+Gitee源码）

❤ React实战项目从0到1搭建（仅供参考Webpack5+Gitee源码）

一、基础篇

1、检查本地环境

2、安装yarn

3、使用yarn搭建一个新的React项目

目录结构

（1）创建项目

（2）配置 react 核心依赖包

（3）安装webpack

（4）安装 Babel

（5）配置项目配置

index.js

问题处理

index.js更改如下

index.html

.babalrc 配置 Babel

package.json

webpack.config.js

4、 运行

5、打包

package.json里面配置的部分

打包命令

二、Webpack5 + React搭建进阶篇

6、安装 webpack-merge (为后续环境准备)

7、config 文件夹配置不同开发环境

配置 webpack.common.config.js

配置打包路径

配置webpack.prod.config.js

4、运行