最新消息:站点添加了一些不太友好的内容,请见谅...

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

开发工具 onlyling 2259浏览 0评论

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

转载请注明:OnlyLing-WEB前端开发者 » create-react-app 通过 react-app-rewired 添加 webpack 的 alias

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址