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

安装

使用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: '李四' }
      ]
    })
  })
}