React-Router+antd+webpack+babel的一个详细demo

antd项目确实是一个非常优秀的开源项目，但是用起来相关文档的说明比较少，特别是从一开始建立一个自己的项目时候需要配置babel，webpack等等，这部分的内容相关介绍就少之又少。因此我写了一个demo,这个demo配置了必要的webpack和babel项，你只要克隆下来，然后npm run dev就可以了。对于第一次理解antd特别有用。项目地址点击这里

webpack配置说明

const path = require("path");
module.exports = {
  module: {
    noparse: [/jquery/],rules: [{
            test: require.resolve('antd'),//此时我们window.antd与window.ANTD都是存在的
            use: [{
                loader: require.resolve('expose-loader'),options: 'antd'
            },{
                loader: require.resolve('expose-loader'),options: 'ANTD'
            }]
        }]
   },//此时我们通过require("antd");就会将antd的所有的组件都暴露到window对象上
   resolve: {
      alias: {
        "antd" :"antd"
      },},devServer:{
      publicPath:'/',open :true,port:8090,// contentBase: path.join(process.cwd(),"public"),
      // webpack-dev-server中的html无法访问外部的html页面或者其他静态资源
      historyApiFallback: {
         rewrites: [
        { from: "/docs/react/common.js",to: '/common.js' },{ from: "/docs/react/index.js",to: '/index.js' },{ from: "/docs/pattern/common.js",{ from: "/docs/pattern/index.js",{ from: "/docs/resource/common.js",{ from: "/docs/resource/index.js",{ from: "/docs/spec/common.js",{ from: "/docs/spec/index.js",{ from: "/components/alert/common.js",{ from: "/components/alert/index.js",{ from: "/components/button/common.js ",{ from: "/components/button/index.js",to: '/index.js' }
         ]
        },contentBase:false,hot:false
    }
}

这里我使用了expose-loader将antd暴露为一个全局变量。但是，一定要注意，这个webpack配置文件设置的只是针对这个项目的特定配置，通用的配置请查看这里，我会自动合并这两处的webpack配置内容~~这也是你为什么一开始要手动安装webpackcc的原因~

npm install webpackcc -g

babel配置

{
    presets: [
    'es2015','stage-0','react'
    ],plugins: [
    'transform-runtime',"react-hot-loader/babel","add-module-exports","jsx-control-statements",['import',{
      libraryName: 'antd',style: 'css'
    }]
    ]
 }

其中最重要的就是其中的babel-plugin-import，当你引入antd的一个组件的时候，他会自动引入其中的css~~