create-react-app 通过 react-app-rewired 添加 webpack 的 alias

共计 820 个字符，预计需要花费 3 分钟才能阅读完成。

react-app-rewired

Override create-react-app webpack configs without ejecting

解决方案

翻阅 react-scripts 源码，发现 webpack 的配置只有两个，并且没有配置的提示。

alias: {
      // @remove-on-eject-begin
      // Resolve Babel runtime relative to react-scripts.
      // It usually still works on npm 3 without this but it would be
      // unfortunate to rely on, as react-scripts could be symlinked,
      // and thus @babel/runtime might not be resolvable from the source.
      '@babel/runtime': path.dirname(require.resolve('@babel/runtime/package.json')
      ),
      // @remove-on-eject-end
      // Support React Native Web
      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
      'react-native': 'react-native-web',
    }

接触 react-app-rewired 工具，我们可以拿到 create-react-app 当前的默认配置，在 config-overrides.js 的里面添加一下配置，就可以使用新的别名了。

module.exports = function override(config, env) {
    // alias
    config.resolve.alias = {
        ...config.resolve.alias,
        '@': resolve('src')
    };
}