1.首先搭建这个项目是作为自己将要学习一下react的环境，最好是按照比较标准的流程走
2.下面简单说一下希望有的功能

• 通过bebel 实现es6的语法

• 通过webpack-dev-server实现热更新

• 在出错的时候可以不用打开控制台查看，而是在页面上变为红色，并且显示出错误

• 可以通过webpack的html-plugin插件可以生成一个html文件，并且引入JS文件，并且生成出来的HTML文件可以已link的方式引入一个通用类型的.css文件

这边是我创建的文件目录，src（源文件） dist(编译后的文件)
src目录下的main.js是入口文件，而编译后的文件是生成在dist目录下面

现在src目录同级的index.html是我手动创建的，在这个HTML文件里面手动引入的index.js

下面是我webpack.config.js的配置信息

module.exports = {
    entry: __dirname + "/src/main.js",
    output:{
         //输出路径
        path: __dirname + "/dist",
        //输出文件名
        filename:"index.js",
    },
    devServer:{
        contentBase:"./",  //设置根目录
        host:"192.168.1.102",  //主机的ip地址
        port:"8888",    //端口
        color:true     //输出的代码是有颜色的
    },
    module: {
        loaders: [
          {
            test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
              presets: ['es2015','react']
            }
          }
        ]
  }
};

在这个config文件下，我手动执行webpack命令文件是可以编译的（ES6会变为ES5），这样是不会报错的，但是没有热更新的功能，希望大神可以在我这个webpack.config配置文件基础上修改，可以达到我想要的效果.
PS:这边没有写`plugins:[

    new webpack.HotModuleReplacementPlugin()
]`是因为当我执行webpack-dev-server --hot --inline的时候会报错，查了原因是因为这个机制不支持react有的相关语法，所以不能热更新。希望大神可以帮帮忙，解解惑，最好是可以在webpack.config配置项上写上注释，谢谢!

下面贴上package.json项目依赖情况（有些插件装了貌似也不大会用）

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-hot-loader": "^1.3.1",
    "react-transform-catch-errors": "^1.0.2",
    "react-transform-hmr": "^1.0.4",
    "redbox-react": "^1.3.3",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}

希望最好可以在代码上写上注释，这样我也会看的比较明白！谢谢大家