create-react-app 2.0 中使用antd, less, 按需加载

版权声明：转载请注明出处 https://blog.csdn.net/qq799028706/article/details/88080754

网上大多都是1.x版本, 很多都过时了. 找了很久才找到解决方案.

首先暴露出配置文件.

yarn eject # 输入 y
yarn add less less-loader

打开config/webpack.config.js文件. 在常量声明中添加

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

在module下的rules下, 添加规则

            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap
                },
                'less-loader',
                {
                  javascriptEnabled: true
                }
              ),
              sideEffects: true
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent
                },
                'less-loader',
                {
                  javascriptEnabled: true
                }
              )
            }
// file loader

其实create-react-app 2.0 内置了sass, 也可以将所有的sass改成less

接下来 通过安装babel-plugin-import 来按需加载

找到babel-loader

            {
              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![path]',
                        },
                      },
                    },
                  ],
                  // 加上这条规则
                  [
                    "import",
                    {
                      libraryName: "antd",
                      style: true,
                    }
                  ]
                ],
                //...