antd按需加載遇到的坑：.bezierEasingMixin();

在less升級到3.x, webpack 升級到4.x的時候，按需加載就會出現錯誤 了。

./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();
^
Inline JavaScript is not enabled. Is it set in your options?
      in /myproject/react/antedemo/node_modules/antd/lib/style/color/bezierEasing.less (line 110, column 0)

Inline JavaScript is not enabled 這句話是關鍵。。

找到issue後，開始解決問題

找到的比較靠譜的答案如下：

也就是給options添加如下代碼：

{
  loader: "less-loader",
  options: {
    javascriptEnabled: true
  }
}

但是尷尬的時候，webpack4的配置已經全部變化了。
loader被封裝了一個函數。

配置如下：

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
{
            test: lessRegex,
            exclude: lessModuleRegex,
            use: getStyleLoaders({
              importLoaders: 3,
              modifyVars: {
                'primary-color': "#f9c700"
              },
              javascriptEnabled: true,
            }, 'less-loader'),
          },
          // Adds support for CSS Modules, but using SASS
          // using the extension .module.scss or .module.sass
          {
            test: lessModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 3,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              },
              'less-loader'
            ),
          },

關鍵點來了：

const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    ///其他代碼
  if (preProcessor) {
    loaders.push(
      {
        loader: require.resolve(preProcessor),
        options: cssOptions,
      }
    );
  }
  return loaders;
};

到這裏完美解決了