antd的按需加载组建和样式

官方说明的两种方式：

第一种，直接显式引入js和css文件

import Table from 'antd/lib/table'; // 加载 JS

import 'antd/lib/table/style/css'; // 加载 CSS

对应的webpack中babel配置：

{

test: /\.css$/,

loader: 'style-loader!css-loader'

}

解释：实际上 import的是一个名为css的js文件，里面又require了一堆用到的css文件。这样webpack解析的时候，无法处理css 文件，会报错，于是加上css-loader。跑起来又发现实际上根本没有加载上任何样式，再加上style-loader后就可以了。最终效果是一堆的style直接嵌入到当前页面了。

第二种，使用官方推荐的babel插件，babel-plugin-import，看起来像antd团队自己做的吧

import {Table} from 'antd'

对应的babel>option配置：

plugins: [

    ["import", {

      "libraryName": "antd",

      "libraryDirectory": "es",

      "style": "css" // `style: true` 会加载 less 文件

    }]

]

注：如果样式加不上，好好检查loader