react 使用rewired_create-react-app 通过 react-app-rewired 添加 webpack 的 alias

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')

};

}