配置react / antd 按需加载 并且使用less（react v16）

1.开启项目   并且执行 yarn eject

下载好我们需要的插件（babel-plugin-import   less  less-loader   antd  react-loadable  .....）

如果需要设置项目启动端口号 可以在项目文件下 新建.env  文件 在文件里写下:

port = 8889

https = false

2. 打开package.json,    在  babel 里面加上：

"plugins": [["import", { "libraryName": "antd", "style": true }]]     //使用antd  允许less

3.在 webpack.config.dev.js   ，  webpack.config.prod.js  中找到  cssRegex  这个变量 修改为：

const cssRegex = /\.(css|less)$/;   //包括less文件

4.在 cssRegex  变量的下边 找到   getStyleLoaders 函数 给函数的 loaders 数组增加一个元素 让其调用less-loader解析less

{

loader:require.resolve('less-loader'),

options:{

javascriptEnabled: true    //允许通过js调用antd组件

}

}

'@': paths.appSrc,     //通过 @  定位到src   paths 对象里有每个文件的地址引用   可修改

如果你不需要每次启动之后浏览器都打开新页面  那么

找到scripts 文件下 start.js 中的  openBrowser 属性   注释掉下方的调用语句

如果你没有yarn eject  暴露配置   那么你可能需要  react-app-rewired  插件  来覆盖项目原有的配置  可见 高级配置