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", to: '/common.js' },
        { from: "/docs/pattern/index.js", to: '/index.js' },
         { from: "/docs/resource/common.js", to: '/common.js' },
        { from: "/docs/resource/index.js", to: '/index.js' },
         { from: "/docs/spec/common.js", to: '/common.js' },
        { from: "/docs/spec/index.js", to: '/index.js' },
        { from: "/components/alert/common.js", to: '/common.js' },
        { from: "/components/alert/index.js", to: '/index.js' },
         { from: "/components/button/common.js ", to: '/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~~