create-react-app run-eject配置antd,less以及打包路径

1. 安装 create-react-app
2. 执行下面命令

npm init react-app my-app
cd my-app
npm run eject

3.配置按需加载antd

• 下载按需加载插件

npm i babel-plugin-import --save

• 配置package.json 或者.babelc.注意只能配置一个，这里以package.json举例

  "babel": {
    "presets": [
      "react-app"
    ],
"plugins": [
[
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "lib",
          "style":"css"
        }
      ]
    ]
  }

到这里就可以按需引入antd组件了

import {Button} from 'antd'

4. 配置less加载

• 下载less文件及less加载器

npm i less less-loader --save

• 配置webpack文件，路径在config/webpack.config.js

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

修改为

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

再复制sass-loader的配置替换为less-loader的配置复制在oneOf下

oneOf:[
...,
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment
                },
                'less-loader'
              ),
              sideEffects: true
            },            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent
                },
                'less-loader'
              )
            },
]

到这里就可以愉快在项目中写less文件了。

5. 配置antd主题
   因为antd使用的样式用less编写，所以

• 修改babel配置

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "lib",
          "style": true
        }
      ]
    ]
  }

-在config/webpack.config.js的getStyleLoaders方法里的if (preProcessor)判断下修改

    if (preProcessor) {
      let loader = {
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: shouldUseSourceMap
        }
      };
      if (preProcessor === 'less-loader') {
        loader.options.modifyVars = {
          'primary-color': '#25b864',
          'link-color': '#1DA57A',
          'border-radius-base': '2px'
        };
        loader.options.javascriptEnabled = true;
      }
      loaders.push(loader);
    }
    return loaders;

重新启动项目，看到默认颜色变绿表示修改成功了
6.打包资源路径
在package.json配置homepage属性，如

"homepage": "./"