react18——使用craco库增量修改webpack——配置antd实现按需加载

Posted 2022-12-11 勇敢*牛牛

安装

使用craco增配置webpack。

yarn add -D @craco/craco

修改：修改package.json文件

"scripts": 
   "start": "craco start",
   "build": "craco build",
   "test": "craco test",

在项目根目录下面创建一个craco.config.js文件

实现路径的简写化：

let path = require("path")
module.exports = 
    webpack:
        alias:
            "@":path.resolve("./src")
        
    

修改别名提示

更根目录下创建一个文件：提示@的文件
jsconfig.json

    "compilerOptions": 
        "baseUrl": ".",
        //在组件中就可以使用@时过来提示文件
        "paths": 
            "@/*":["./src/*"]
        
    

配置antd实现按需加载打包；

yarn add antd
// import 'antd/dist/antd.css'

优化：打包

yarn add -D @craco/craco 
yarn add babel-plugin-import -D

使用craco.config配置webpack，完成中间使用，增量配置。

let path = require("path");
module.exports = 
    // yarn add -D babel-plugin-import 包先安装
    babel: 
        // antd包在craco增量配置中的按需加载配置
        plugins: [
            ["import",  libraryName: "antd", libraryDirectory: "es", style: "css" ],
        ],
    ,
    webpack: 
        alias: 
            "@": path.resolve("./src"),
        ,
    ,
;

// 此文件中写mock数据
module.exports = app => 
  app.get('/api/users', (req, res) => 
    res.send(
      code: 0,
      msg: 'ok',
      data: [
         id: 1, name: '张三' ,
         id: 2, name: '李四' 
      ]
    )
  )