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:  http://www.javashuo.com/article/p-epyzylvu-bv.html （推薦）

使用新版的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,
              },
            },

重啓項目，編譯後大功告成！