• create-react-app eject 之后修改webpack4的配置达到antd按需加载

    2020-11-20 231阅读 0评论

     

     安装  babel-plugin-import

    $npm install  babel-plugin-import 或 $ yarn add babel-plugin-import

     

     在  webpack.config.js  的如下位置添加   [require.resolve('babel-plugin-import'), { libraryName: 'antd', style: 'css' }],

     

    复制代码
    {
                  test: /\.(js|mjs|jsx|ts|tsx)$/,
                  include: paths.appSrc,
                  loader: require.resolve('babel-loader'),
                  options: {
                    customize: require.resolve(
                      'babel-preset-react-app/webpack-overrides'
                    ),
                    
                    plugins: [
                      [
                        require.resolve('babel-plugin-named-asset-import'),
                        {
                          loaderMap: {
                            svg: {
                              ReactComponent:
                                '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                            },
                          },
                        },
                      ],
                      [require.resolve('babel-plugin-import'), { libraryName: 'antd', style: 'css' }],
                      isEnvDevelopment &&
                        shouldUseReactRefresh &&
                        require.resolve('react-refresh/babel'),
                    ].filter(Boolean),
    复制代码

     

    复制代码
    import { Button } from 'antd';
    
    const App = () => (
      <div >
        <Button type="primary">Button</Button>
      </div>
    );
    复制代码

     

    posted @   webnote  阅读(231)  评论(0)    收藏  举报
    我要评论

    编辑推荐:
    · 从零实现富文本编辑器#3-基于Delta的线性数据结构模型
    · 记一次 .NET某旅行社酒店管理系统 卡死分析
    · 长文讲解 MCP 和案例实战
    · Hangfire Redis 实现秒级定时任务,使用 CQRS 实现动态执行代码
    · Android编译时动态插入代码原理与实践
    阅读排行:
    · 使用TypeScript开发微信小程序(云开发)-入门篇
    · 没几个人需要了解的JDK知识,我却花了3天时间研究
    · 在SqlSugar的开发框架中增加对低代码EAV模型(实体-属性-值)的WebAPI实现支持
    · .NET Core中的配置Configuration实战
    · C#高性能开发之类型系统:从 C# 7.0 到 C# 14 的类型系统演进全景
    点击右上角即可分享
    微信分享提示