为我的CRA typescript项目中的几乎每个文件创建‘'dist’文件夹

基础概念

dist 文件夹通常用于存放编译后的代码，这些代码是经过构建工具（如 Webpack、Parcel 等）处理后的最终产物，可以直接部署到服务器上供浏览器使用。在 CRA（Create React App）项目中，默认情况下，构建过程会生成一个 build 文件夹，而不是 dist 文件夹。

类型

构建工具生成的文件夹：如 Webpack 的 dist 文件夹。
手动创建的文件夹：用于存放特定编译或打包后的文件。

应用场景

在 CRA 项目中，如果你希望将编译后的代码放在 dist 文件夹而不是默认的 build 文件夹，可以通过修改构建配置来实现。

如何创建 `dist` 文件夹

修改 package.json 中的脚本：

"scripts": {
  "build": "react-scripts build && mv build dist"
}

这个脚本会在构建完成后将 build 文件夹重命名为 dist。

使用自定义 Webpack 配置：

CRA 允许你通过 react-app-rewired 和 customize-cra 来自定义 Webpack 配置。

首先，安装依赖：

npm install react-app-rewired customize-cra --save-dev

然后，在项目根目录下创建 config-overrides.js 文件：

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
  }),
  (config) => {
    config.output.path = path.resolve(__dirname, 'dist');
    return config;
  }
);

最后，修改 package.json 中的脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}