向 Create-React-App 添加 Webpack Alias 的相关设置

嘛，我最近在看 React。

然后遇到个问题就是，项目的文件夹可能比较复杂，想要互相引用的时候有时候路径很长。比如出现“../../../xxxx”这样的东西，就很丑。

这就自然想起用 Webpack Alias 来简化导入了，之前在用 Vue 的时候使用@来代替src目录很爽，所以打算照抄一下。

结果发现，如果使用 Create-React-App（下称CRA）的话，除非使用 CRA 的 eject 功能把所有配置文件 dump 出来之后自己修改，否则是无法修改 Webpack 的配置的。

由于 Webpack 的配置文件的修改是世界难题，CRA 官方也不推荐使用 eject ，所以我找到了一个局部修改 Webpack 配置的方法。

使用 react-app-rewired 来局部修改配置。

根据项目说明修改了 package.json 之后，来根目录下创建个 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;
}

这里用了对象展开运算符 ，以期不影响原来可能有的 alias 设置。

这样的话 Webpack 这边的设置是完成了。

还有一个问题就是，因为我使用 TypeScript 开发，TypeScript Language Server 并不认我的 @ 别名，所以我还需要修改一下 tsconfig.json。

在 complierOptions 下添加

 "paths": {
     "@/*": ["src/*"]
 }

重启 TypeScript Language Server，完全 OK。