配置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組件

　　}

}

5. 在兩個文件的 module.exports 中     找到   resolve  屬性  在設置他的 alias 對象：

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

如果你不需要每次啟動之后瀏覽器都打開新頁面  那么

　　找到scripts 文件下 start.js 中的  openBrowser 屬性   注釋掉下方的調用語句

 

如果你沒有yarn eject  暴露配置   那么你可能需要  react-app-rewired  插件  來覆蓋項目原有的配置  可見 高級配置