配置react / antd 按需加载 并且使用less(react v16)

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

  下载好我们需要的插件(babel-plugin-import   less  less-loader   antd     .....)

  如果需要设置项目启动端口号 可以在项目文件下 新建.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  插件  来覆盖项目原有的配置  可见 高级配置

猜你喜欢

转载自www.cnblogs.com/oicb/p/10081236.html