03. 从零开始，新建一个啥都有的React项目（webpack别名配置）

1. 配置webpack别名有什么用？

• 设置别名可以让后续引用的地方减少路径的复杂度，如../../src/pages/a.tsx 就可以写为 @/pages/a.tsx

2. 要配置哪些东西？

• 先简单说明一下，需要配置3个地方，分别是：
  1. 配置 webpack 别名，否则项目会无法启动及打包
  2. 配置 tsconfig 别名，否则无法通过 typescript 静态检查
  3. 配置 Eslint 别名，否则无法通过 Eslint 语法检查

3. 如何配置

1. 安装需要的依赖

# 不想执行 yarn eject 又想修改 webpack 配置文件时，需要安装这个包
yarn add -D react-app-rewired

# 想让 eslint 支持别名配置，需要安装这个包
yarn add -D eslint-import-resolver-alias

2. 配置 webpack ，让 webpack 认识你配置的别名

1. 新建 config-overrides.js 文件来覆写webpack配置

// config-overrides.js
const path = require('path')

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = function override(config, env) {
  config.resolve.alias = {
    ...config.resolve.alias,
    
    // 目前我只配置了@，如果想继续自定义别名的话，按这个格式继续往下写就好了
    '@': resolve('./src'),
  };
  return config;
}

2. 修改 package.json 启动参数，使用 react-app-rewired 启动项目

// package.json
{
  // ...
  "scripts": {
    // 将 `react-scripts` 改为 `react-app-rewired`
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  }
  // ...
}

3. 配置 .eslintignore 忽略 config-overrides.js 文件

# .eslintignore
config-overrides.js

4. 配置 TS ，让 typescript 认识你配置的别名

1. 新建 tsconfig.paths.json 文件，配置别名

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

2. 在 tsconfig.js 中引入 tsconfig.paths.json

// tsconfig.json
{
  // ...
  "extends": "./tsconfig.paths.json",
  // ...
}

5. 修改 Eslint 配置文件，让 Eslint 认识你配置的别名

module.exports = {
  // ...
  settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@', './src']
        ],
        extensions: ['.js', '.ts', 'tsx', '.json']
      }
    }
  },
  // ...
};