antd 按需加载

前言

上一篇文章介绍了从零搭建 react + webpack + typescript 空白脚手架，本篇文章介绍下 antd 的安装及配置。

安装 antd

运行：

$ npm install --save antd
$ npm install --save-dev babel-plugin-import

配置 babel

module.exports = {
    // ...
    plugins: [
        [ // 添加此处
            'import', {
                libraryName: 'antd',
                libraryDirectory: 'es',
                style: true
            }
        ]
    ]
}

配置 webpack

{
  loader: 'less-loader',
  options: { // 添加此处
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: { // 自定义的antd样式
          'primary-color': '#4183c4',
          'border-radius-base': '0.3em'
        }
    }
  }
},

运行测试测试 antd 是否正常加载

import React, { useEffect } from 'react';
import { Button } from 'antd';

const Index = () => {
  useEffect(() => {
    console.log('hello')
  }, [])
  return (
    <div className="title">
      <Button type="primary">HELLO</Button>
    </div>
  )
}

export default Index;