使用create-react-app脚手架搭建React项目

create-react-app#

react脚手架工具，简称cra中文文档

创建项目

1
npx create-react-app my-app
2
# 创建typescript项目
3
npx create-react-app my-app --template typescript

可以看到会同事下载react、react-dom、react-scripts这三个依赖包

易于维护

更新构建工具只需要执行如下命令即可升级
Terminal window
```
1
npm install react-scripts@latest
```

正确修改webpack配置#

cra创建的项目不会有webpack配置，统一封装在react-scripts中，使用npm run eject可以将封装在react-scripts中webpack配置全部反编译到当前项目，下面这张图就是使用执行eject，可以看到多了很多配置文件，但是一个单项操作，eject后就无法恢复，所以做一些简单的配置，eject是没有必要的

使用react-app-rewired#

react-app-rewired针对cra搭建的项目修改webpack配置，配合customize-cra来实现自定义的配置

安装依赖

1
npm install react-app-rewired customize-cra -D

修改scripts配置

1
"scripts": {
2
   "start": "react-app-rewired start",
3
   "build": "react-app-rewired build",
4
   "test": "react-app-rewired test",
5
   "eject": "react-scripts eject"
6
 },

项目根目录创建config-overrides.js来对webpack配置进行扩展

使用react-app-rewired搭配customize-cra修改配置项#

添加Proxy配置、别名设置

1
 const path = require("path");
2
 const {
3
   override,
4
   overrideDevServer,
5
   addWebpackAlias,
6
 } = require("customize-cra");
7

8
 // Proxy配置
9
 const devServerConfig = () => (config) => {
10
   return {
11
     ...config,
12
     // 服务开启gzip
13
     compress: true,
14
     proxy: {
15
       "/api": {
16
         target: "xxx",
17
         changeOrigin: true,
18
         pathRewrite: {
19
           "^/api": "",
20
         },
21
       },
22
     },
23
   };
24
 };
25
 module.exports = {
26
   webpack: override(
27
     // 设置别名
28
     addWebpackAlias({
29
       src: path.resolve(__dirname, "src"),
30
       apis: path.resolve(__dirname, "src/apis"),
31
       assets: path.resolve(__dirname, "src/assets"),
32
       styles: path.resolve(__dirname, "src/assets/styles"),
33
       pages: path.resolve(__dirname, "src/pages"),
34
       components: path.resolve(__dirname, "src/components"),
35
       utils: path.resolve(__dirname, "src/utils"),
36
     })
37
   ),
38
   // proxy配置
39
   devServer: overrideDevServer(devServerConfig()),
40
 };

增加less支持

1
yarn add less less-loader -D

1
 const path = require("path");
2

3
 const {
4
   override,
5
   overrideDevServer,
6
   addWebpackAlias,
7
   addLessLoader
8
 } = require("customize-cra");
9

10
 // Proxy配置
11
 const devServerConfig = () => (config) => {
12
   ...
13
 };
14
 module.exports = {
15
   webpack: override(
16
     // 设置别名
17
     ...
18
     // less配置
19
     addLessLoader({
20
       lessOptions: {
21
         javascriptEnabled: true,
22
         cssModules: {
23
           localIdentName: '[path][name]__[local]--[hash:base64:5]', // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.
24
         },
25
       },
26
     }),
27
   ),
28
   // proxy配置
29
   devServer: overrideDevServer(devServerConfig()),
30
 };

antd按需加载

安装依赖

1
npm i antd babel-plugin-import -D

1
 const path = require("path");
2
 const {
3
   override,
4
   overrideDevServer,
5
   addWebpackAlias,
6
   addLessLoader,
7
   fixBabelImports,
8
 } = require("customize-cra");
9

10
 module.exports = {
11
   webpack: override(
12
     ...
13
     fixBabelImports("import", {
14
       libraryName: "antd",
15
       libraryDirectory: "es",
16
       style: true,
17
     }),
18
     // less配置
19
     addLessLoader({
20
       lessOptions: {
21
         javascriptEnabled: true,
22
         // antd主题定制https://ant.design/docs/react/customize-theme-cn#%E5%AE%9A%E5%88%B6%E6%96%B9%E5%BC%8F
23
         modifyVars: {
24
           'primary-color': '#1DA57A',
25
           'link-color': '#1DA57A',
26
           'border-radius-base': '2px',
27
         },
28
         cssModules: {
29
           localIdentName: "[path][name]__[local]--[hash:base64:5]", // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.
30
         },
31
       },
32
     })
33
   ),
34
   ...
35
 };

打包压缩

1
npm install compression-webpack-plugin -D

1
...
2
const CompressionWebpackPlugin = require('compression-webpack-plugin');
3
module.exports = {
4
   webpack: override(
5
     ...
6
     if (process.env.NODE_ENV === 'production') {
7
       // 添加js打包gzip配置
8
       config.plugins.push(
9
         new CompressionWebpackPlugin({
10
           test: /\.js$|\.css$/,
11
           threshold: 1024,
12
         }),
13
       )
14
     }
15
   ),
16
   ...
17
 };

修改生产环境文件路径

1
  module.exports = {
2
    webpack: override(
3
    (config) => {
4
      if (REACT_APP_ENVKEY === 'prod') {
5
        config.output.publicPath = 'https://app-s3.quickcep.com/';
6
      }
7
    })
8
  }

WebpackBar插件

1
const WebpackBar = require('webpackbar');
2
module.exports = {
3
   webpack: override(
4
   (config) => {
5
     config.plugins.push(new WebpackBar());
6
   })
7
 }

项目优化#

添加react-hot-reloader实现局部刷新

构建react项目默认使用webpack-dev-server实现热更新，修改移除会使整个页面刷新，使用react-hot-loader可以实现局部刷新

1
npm install react-hot-loader react-app-rewire-hot-loader @hot-loader/react-dom -D

在App.js中配置

1
import { hot } from 'react-hot-loader/root'
2
...
3
const AppHot = process.env.NODE_ENV === 'development' ? hot(App) : App;
4
export default AppHot

webpack配置

1
 const rewireReactHotLoader = require('react-app-rewire-hot-loader')
2
 const hotLoader = () => (config, env) => {
3
   config = rewireReactHotLoader(config, env)
4
   return config
5
 }
6

7
 module.exports = {
8
   webpack: override(
9
     hotLoader(),
10
   )
11
 }

关闭sourceMap

在.env中设置
```
1
GENERATE_SOURCEMAP=false
```

在scripts中设置

1
"build": "GENERATE_SOURCEMAP=false react-app-rewired build"