配置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  插件  来覆盖项目原有的配置  可见 高级配置

 

转载于:https://www.cnblogs.com/oicb/p/10081236.html