antd按需加載,配置babel-plugin-import插件,編譯后報錯.bezierEasingMixin()解決方案

報錯如下：

./node_modules/antd/lib/button/style/index.less (./node_modules/css-loader??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js!./node_modules/antd/lib/button/style/index.less)
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^

解決方案1： https://www.cnblogs.com/rebirth-csz/p/9263149.html

打開項目package.json ，將less版本降到3.0以下 比如安裝 2.7.3版本。再 install 

解決方案2:  https://blog.csdn.net/weixin_40814356/article/details/84676903 （推薦）

使用新版的create-react-app創建項目后會發現，以前的webpack配置分為dev和prod兩個文件，現在合為一個文件webpack.config.js了。

因為antd底層使用less，因此我們要單獨配置less。首先我們要將單獨抽離的loader函數做一下修改。

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

// ...其他代碼

// common function to get style loaders
  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: Object.assign(
          {},
          shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
        ),
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
          ],
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },
      },
    ].filter(Boolean);
    if (preProcessor) {
      loaders.push({ loader: require.resolve(preProcessor), options: Object.assign( {}, { sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, }, cssOptions ) });
    }
    return loaders;
  };

然后修改less的loader配置，將以下代碼添加到sass-loader的后面。

           {
              test: lessRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  // modifyVars: {
                  //   'primary-color': "#f9c700"
                  // },
                  javascriptEnabled: true,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },        

然后babel-loader處添加按需加載的plugins配置。

          {
              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", "libraryDirectory": 'es', "style": true }]
                ],
                cacheDirectory: true,
                cacheCompression: isEnvProduction,
                compact: isEnvProduction,
              },
            },

重啟項目，編譯后大功告成！