webpack配置react18中路径别名、antd按需加载、网络服务

安装库：

yarn add -D @craco/craco

修改package.json文件：

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

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

// 此文件的功能是增量配置webpack的，修改了此文件，一定要重启项目
// https://github.com/dilanx/craco/blob/master/packages/craco/README.md
const path = require('path')
const mockFn = require('./mock')

module.exports = {
    
    
  // yarn add -D babel-plugin-import 包先安装
  // antd包在craco增量配置中的按需加载配置
  babel: {
    
    
    plugins: [['import', {
    
     libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]]
  },

  // 添加路径别名
  webpack: {
    
    
    alias: {
    
    
      // 在组件中就可以用@来表示，当前项目到src目录
      '@': path.resolve('./src')
    }
  },

  // 配置网络服务
  devServer: {
    
    
    // 浏览器自动打开关闭
    open: false,
    port: 3000,
    proxy: {
    
    
      // '/api': {
    
    
      //   target: 'http://localhost:3000',
      //   changeOrigin:true,
      //   pathRewrite: { '^/api': '' }
      // }
    },
    setupMiddlewares: (mids, {
     
      app }) => {
    
    
      // app它就是express的实例对象
      mockFn(app)
      // 必须要把mids对象返回
      return mids
    }
  }
}

路径别名需要代码提示的话，还需要在根目录下创建 jsconfig.json 文件写入如下代码：

{
    
    
  "compilerOptions": {
    
    
    "baseUrl": ".",
    "paths": {
    
    
      "@/*": ["./src/*"]
    }
  }
}