react+antd后台管理系统（1）环境初始化

react后台管理系统（1）环境初始化

---

react + antd + less + 按需加载环境配置

1. 使用create-react-app创建app

create-react-app yinbao-ams2

2. 引入antd和less

yarn add antd or npm install antd --save
yarn add less less-loader

3. antd实现按需加载 babel-plugin-import

step1:

暴露webpack等配置文件 yarn eject,

安装babel-plugin-import yarn add babel-plugin-import

修改配置文件

{
    // 修改前
    test: /\.(js|jsx|mjs)$/,
    include: paths.appSrc,
    loader: require.resolve('babel-loader'),
    options: {              
    },
},

{
    // 修改后
    test: /\.(js|jsx|mjs)$/,
    include: paths.appSrc,
    loader: require.resolve('babel-loader'),
    options: {  
        // 新增
        plugins: [['import',[{libraryName: 'antd',style: true,}]]],              
    },
},

4. 结果展示

– 目录结构

– 代码

– 展示

###附: less 报错
.bezierEasingMixin(); ^ Inline JavaScript is not enabled. Is it set in your options?

新增

 {
    loader: "less-loader", // compiles Less to CSS
    options: {
      javascriptEnabled: true,
    }
  }