篇首语：本文由小编为大家整理，主要介绍了react18 + TS的webpack增量配置——使用craco/craco相关的知识，希望对你有一定的参考价值。
react18 + TS的webpack增量配置——使用@craco/craco
安装@craco/craco
在项目根目录下面创建一个craco.config.ts文件
在tsconfig.json文件中添加tsc编译目录或文件
修改package.json文件中的自定义命令
- yarn add @craco/craco
- yarn add -D @types/node
- 修改配置，araco.config,ts和tsc.confi配置。
- 这次修改之后模块化就变成了ESCM，es6模块化；
- 注意导入方式。
- mock数据，安装一下
yarn add -D express @types/express// 指定express的数据类型
// 此文件的功能是增量配置webpack的，修改了此文件，一定要重启项目// https://github.com/dilanx/craco/blob/master/packages/craco/README.md// const path = require("path")import resolve from "path"import mockFn from "./mock"module.exports = // yarn add -D babel-plugin-import 包先安装 babel: // antd包在craco增量配置中的按需加载配置 // plugins: [["import", libraryName: "antd", libraryDirectory: "es", style: "css" ]] , // 添加路径别名 webpack: alias: // 在组件中就可以用@来表示，当前项目到src目录 "@": resolve("./src") , devServer: // 浏览器自动打开关闭 open: false, port: 3000, proxy: // "/api": // target: "http://localhost:3000", // changeOrigin:true, // pathRewrite: "^/api": "" // , // 在内置一些方法，它里面的类型过于复杂，可以用any，但在你定义的应用中，尽可能不要用any setupMiddlewares: (mids: any, server: any) => // app它就是express的实例对象 mockFn(server.app) // 必须要把mids对象返回 return mids 在tsconfig.json修改文件。做到@/路径能被找见：
"baseUrl": ".", //在组件中就可以使用@时过来提示文件 "paths": "@/*":["./src/*"] mock数据：
import type Request, Response, Application from "express"export default (app: Application) => app.get("/api/users", (req: Request, res: Response) => res.send( code: 0, msg: "ok", data: [ id: 1, name: "张三" , id: 2, name: "李四" , id: 3, name: "王五" ] ) )以上是关于react18 + TS的webpack增量配置——使用craco/craco的主要内容，如果未能解决你的问题，请参考以下文章
