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,
    }
  }