配置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  插件  來覆蓋項目原有的配置  可見 高級配置