❤ React项目搭建(仅供参考Webpack5+Gitee源码)

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

源码地址
gitee.com/NexusLinNoa…

一、基础篇

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

❤ React项目搭建(仅供参考Webpack5+Gitee源码)

(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"
 }

❤ React项目搭建(仅供参考Webpack5+Gitee源码)

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/ 即可看到如下效果:

❤ React项目搭建(仅供参考Webpack5+Gitee源码)

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

❤ React项目搭建(仅供参考Webpack5+Gitee源码)

二、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 作者:林太白

(0)
上一篇 2024年4月10日 下午4:16
下一篇 2024年4月10日 下午4:26

相关推荐

发表回复

登录后才能评论