ui库的按需引入（antd）

ui库的按需引入（antd）

---

antd按需引入有两种

第一种、npm install antd --save

第一种是如下所示，比较繁琐，如果想要引入button，就需要引入button及其style。
等于说使用一个组件就需要引入两个文件，太麻烦了。

import Button from 'antd/lib/button';  
import 'antd/lib/button/style';

所以更好的方式是第二种，使用 babel，babel-plugin-import来实现同样的按需加载效果。

第二种 npm install babel-plugin-import --save

1.首先在package.json配置

"plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]

2.在index.js中引入import ‘antd/dist/antd.min.css’

import 'antd/dist/antd.min.css';

引入完成之后发现控制台报了个错

Error:Module parse failed: /Users/miaomiaomiao/Desktop/demo/node_modules/antd/dist/antd.min.css Unexpected character '@' (9:0)
You may need an appropriate loader to handle this file type.

可是明明webpack配置里已经使用了css-loader，为什么还是报错呢？经过一番上网查找之后发现，原来是在webpack loaders 配置的时候需要把 css 和 css modules 分开处理，并加上 exclude or include, 不去处理 antd引用的样式 。所以在webpack.config.js的loaders里面加上下面这一段代码

  {
    test: /\.css$/,
    loader: 'css?sourceMap&modules&localIdentName=[local]___[hash:base64:5]!!',
    exclude: /node_modules/,
  },
  {
    test: /\.css$/,
    loader: 'style!css',
  }

就解决啦。