基础配置

手脚架安装项目

1.1 全局安装 create-react-app
npm install -g create-react-app

2.1 构建项目
create-react-app my-app

3.1 进入创建的项目
cd my-app

4.1 启动项目
npm start

5.1 隐藏的文件
Webpack 或 Babel 等文件都是隐藏的，可通过 npm eject来显示；
注：此命令不可逆

路由

2.1 路由模式 react-dom 和 react-router-dom
Router-dom 提供了一些 Router 的核心 api，包括 Router、Route、Switch 等，但是它没有提供 dom 操作进行跳转的 api;
React-router-dom 提供了 BrowserRouter、Rout 、Link、Switch 等 api，可以通过 dom 的事件控制路由。

2.2 依赖
npm install react-router-dom --save-dev

2.3 写法
import {  } from "react-router-dom"

node-sass配置

3.1 依赖
npm install sass-loader node-sass --save-dev

3.2 配置
Config > webpacck.config.js

{
    loader: require.resolve('file-loader'),
    // Exclude `js` files to keep "css" loader working as it injects
    // its runtime that would otherwise be processed through "file" loader.
    // Also exclude `html` and `json` extensions so they get processed
    // by webpacks internal loaders.
    exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
    options: {
        name: 'static/media/[name].[hash:8].[ext]',
    },
},
{
    test: /\.scss$/,
    loader: ['style-loader','css-loader','sass-loader'],
}

3.3 sass 全局变量配置
依赖： npm install sass-resources-loader -D

添加配置：
Config > webpacck.config.js

{
   test: sassRegex,
   exclude: sassModuleRegex,
   use: getStyleLoaders(
     {
         importLoaders: 3,
         sourceMap: isEnvProduction && shouldUseSourceMap,
     },
   'sass-loader'
    ).concat(
        loader: 'sass-resources-loader',
        options: 
        resources: [
           //这里按照你的文件路径填写
           path.resolve(__dirname,'./../src/styles/main.scss')
        ]
     }
   }),
   sideEffects: true,
 },

Antd按需引入

4.1 依赖：
npm install antd --save

4.2 依赖按需加载包
npm install babel-plugin-import --save-dev

4.3 配置
Config> webpack.config.js

{
     test: /\.(js|mjs|jsx|ts|tsx)$/,
     include: paths.appSrc,
     loader: require.resolve('babel-loader'),
     options: {
           customize: require.resolve(
           'babel-preset-react-app/webpack-overrides' ),
            plugins: [
              [
                 require.resolve('babel-plugin-named-asset-import'),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent:
                            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                        },
                      },
                    },
               ],
               [ 'import', { libraryName: "antd", style: "css"} ]
           ],
           cacheDirectory: true,
           cacheCompression: false,
           compact: isEnvProduction,
      },
 }