‘use strict‘;
var ExtractTextPlugin = require("extract-text-webpack-plugin");  //css单独打包
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    devtool: ‘eval-source-map‘,
    entry: {
        main: ‘./src/entry.js‘, //唯一入口文件
        vendor: [‘react‘]   //这里是依赖的库文件配置，和CommonsChunkPlugin配合使用可以单独打包
    },
    output: {
        path: ‘./build‘, //打包后的文件存放的地方
        filename: ‘main.js‘, //打包后输出文件的文件名
        publicPath: ‘http://localhost:8888/build/‘  //启动本地服务后的根目录
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: "jsx!babel", include: /src/},
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style", "css!postcss")},
            { test: /\.scss$/, loader: ExtractTextPlugin.extract("style", "css!postcss!sass")},
            { test: /\.(png|jpg|gif)$/, loader: ‘url?limit=819200‘}
        ]
    },
    babel: {
        presets: [‘es2015‘, ‘stage-0‘, ‘react‘],
        plugins: [‘transform-runtime‘, [‘import‘, {
          libraryName: ‘antd‘,
          style: ‘css‘
        }]]
    },
    postcss: [
        require(‘autoprefixer‘)    //调用autoprefixer插件,css3自动补全
    ],
    devServer: {
        // contentBase: ‘./src/views‘  //本地服务器所加载的页面所在的目录
        port: 8888,
        colors: true,  //终端中输出结果为彩色
        historyApiFallback: true,  //不跳转
        inline: true  //实时刷新
    },
    plugins: [
        new ExtractTextPlugin(‘main.css‘),
        new CommonsChunkPlugin({
           name: ‘vendor‘,
           filename: ‘vendor.js‘
        })
    ]
}

import React from ‘react‘;    //引入react
import { Progress, Button } from ‘antd‘;    //引入antd
const ButtonGroup = Button.Group;
class myProgress extends React.Component {
    constructor(props) {
        super(props)
        this.state = {   //初始化组件的状态
            percent: 0
        }
    } 
    increase() {   //自定义函数
        let percent = this.state.percent + 10;
        if (percent > 100) {
            percent = 100;
        }
        this.setState({ percent });   //设置组件的状态
    }
    decline() {   //自定义函数
        let percent = this.state.percent - 10;
        if (percent < 0) {
            percent = 0;
        }
        this.setState({ percent });
    }
    render() {
        return (
            <div className="progress-wrap">    //类名使用className
                <Progress percent={this.state.percent} />
                <Progress type="circle" percent={this.state.percent} />
                <ButtonGroup>
                    <Button type="ghost" onClick={this.decline.bind(this)} icon="minus" />
                    <Button type="ghost" onClick={this.increase.bind(this)} icon="plus" />
                </ButtonGroup>
                <span>点击按钮可以看到进度条的变化</span>
            </div>
        )
    }
}
export default myProgress;  //导出这个组件（ES6语法）

import ReactDom from ‘react-dom‘;
import { Router, Route, Link, hashHistory, IndexRoute, Redirect, IndexLink} from ‘react-router‘;
ReactDom.render((
    <Router history={hashHistory}>   //路由容器
        <Route path="/" component={Sider}>    //一级路由，路径为"/"时，加载“Sider”组件
            <IndexRoute component={myIntroduce} />   //默认路由，加载“Sider”和“myIntroduce”组件
            <Route path="myIntroduce" component={myIntroduce} />   //二级路由
            <Route path="myTable" component={myTable} />    //二级路由
            <Route path="myForm" component={myForm} />   //二级路由
            <Route path="myProgress" component={myProgress} />   //二级路由
            <Route path="myCarousel" component={myCarousel} />   //二级路由
        </Route>
    </Router>
), document.getElementById(‘app‘));

import { Progress, Button } from ‘antd‘;    //引入antd
const ButtonGroup = Button.Group;   //按钮组
......
<Progress percent={this.state.percent} />    //使用进度条组件，percent是组件提供的配置项
<Progress type="circle" percent={this.state.percent} />
<ButtonGroup>
    <Button type="ghost" onClick={this.decline.bind(this)} icon="minus" />
    <Button type="ghost" onClick={this.increase.bind(this)} icon="plus" />
</ButtonGroup>
......

babel: {
    presets: [‘es2015‘, ‘stage-0‘, ‘react‘],
    plugins: [‘transform-runtime‘, [‘import‘, {
        libraryName: ‘antd‘,
        style: ‘css‘
    }]]
}