24-react项目搭建-基于webpack

这里我采用create-react-app进行搭建

• 主要是熟悉一下很久没有配置webpack了
• 从架构的层面本人觉得简单够用就行了

npx create-react-app react-exam-systeam --template redux-typescript

• 如果安装太慢了，终端设置淘宝镜像

npm config set registry https://registry.npm.taobao.org/

扩展配置项

npm run eject // 不可逆

• 将create-react-app的内置配置,编程webpack，我们可以修改,可以扩展
• 是facebook工程师提供的基本的webpack配置,里面就有比较完善的webpack配置学习了

补充依赖

npm i react-router-dom

import React from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import { store } from "./app/store";

import App from "./App";
import "./index.css";

const container = document.getElementById("root")!;
const root = createRoot(container);

root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

项目中常见的3种css

• normailize.css -> 初始化样式
• App.css ->layout容器级别的样式
• 页面级样式、组件级样式 -> 常用css in js 或者 Css Module

配置路径-(为了方便找路径)

• 去找webpack.config.js -> 找alias项进行配置

'@': path.resolve(__dirname, '../src')

• 注意ts的别名也要配置tsconfig.json

// => compilerOptions中添加属性
{
  "compilerOptions": {
    ...此处省略
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

注意了如果有问题,重启吧骚年

使用scss

• 安装依赖

npm i sass -D

安装axios

在package.json里面添加

"proxy": "http://localhost:7000"