2、create-react-app自定義配置

這裏主要講解添加less  和  實現Antd按需加載

首選須要執行npm run eject 暴露全部內建的配置 ，這是後面全部配置的基礎，這個必須優先執行！

1、實現Antd按需加載

按需加載插件。只須要引入模塊便可，無需單獨引入樣式。

import {Button} from 'antd';
ReactDom.render(
<div>
  <Button>
    XXXX
  </Button>
</div>);

 1. 使用babel-plugin-import實現Antd按需加載，修改package.json，或者在項目根目錄新建文件.babelrc寫配置，注意是二選一。

首先執行如下命令安裝 babel-plugin-import

npm install babel-plugin-import --save-dev

1）、修改package.json

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

2）、修改.babelrc

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

注意： 不要認爲package.json裏已有presets配置這裏就不用寫，這裏的.babelrc會覆蓋package.json裏帶有的babel配置，若是刪除presets配置，會報錯。

2、引入Less

1）安裝less-loader 和 less

 

npm install less-loader less --save-dev

2）修改config文件夾下的webpack.config.dev.js和webpack.config.prod.js文件(都須要修改)
查找 ：exclude
本來的 exclude: [/\.js$/, /\.html$/, /\.json$/],
修改成 exclude: [/\.html$/, /\.(js|jsx)$/, /\.(css|less)$/, /\.json$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],

查找：test: /.css$/
本來的 test: /\.css$/,
修改成 test: /\.(css|less)$/,

在這個test的下面找到use，添加loader

use: [  
    {...},
    {...},
    {
      loader: require.resolve('less-loader') // compiles Less to CSS
    }
  ]

 

 參考地址：

https://blog.csdn.net/zhaoyu_m69/article/details/78800887

https://segmentfault.com/a/1190000012881473

https://blog.csdn.net/qq_35809834/article/details/72670220