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

 

 安装  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>
);