关于webpack和react的配合开发

   最近在用react做移动前端ui框架，刚好要用到webpack进行模块打包，经过几天的研究，发现webpack对于react真的是开发神器，尤其是热加载这一块，现在把这几天的研究成果（入门篇）写下来，希望对一些入门的新手有帮助。
  
    什么是react
看到这篇文章的同学肯定已经对react有所了解，所以在这不做介绍，不懂的同学请请前往官方网站[React.js]

项目结构：

    src/
         js/
              entry.js/入口文件
              Hello.js/组件
       index.html/页面模板

配置webpack：

第一步肯定是先配置webpack，以下我们一般都是用npm做配置

    $ npm install webpack -g
或者
    
    $ npm init
    $ npm install webpack --save-dev
以及安装

    $ npm install webpack-dev-server --save-dev
webpack-dev-server可以让我们通过端口去访问我们的工程项目（一般端口位8080，可以修改），具体在这也不做介绍。

第二步，创建配置文件，每一个项目都需要一个webpack.config.js配置。

具体配置说明可以看[中文官方文档]

主要注意下载需要的插件以及loaders

   在于react相互配合的时候主要下载以下插件：

    npm install react react-dom --save    
    
也要下载相应的Loder，react需要的主要为babel插件，添加配置

    {
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel',//在webpack的module部分的loaders里进行配置即可
     }
至于其它的loder看自己需求，主要css等。

这些配置完，项目跑起来组件应该就能渲染了，但是我们要加另外一个很重要的东西，就是热加载Babel-plugin-react-transform，能让我们不用刷新页面进行局部组件替换，对于我们开发人员来说这是非常方便的。

首先，我们下载相应的插件
    
    npm install --save-dev babel-plugin-react-transform
    npm install --save-dev react-transform-hmr
    npm install babel-preset-react-hmre --save-dev
如果要即使catch错误，也安装
    
    npm install --save-dev react-transform-catch-errors redbox-react
然后在根目录新建.babelrc配置babel

    {
      "presets": ["react", "es2015"],
      "env": {
        "development": {
     "plugins": [["react-transform", {
       "transforms": [{
         "transform": "react-transform-hmr",

         "imports": ["react"],

         "locals": ["module"]
           }]
         }]]
        }
      }
    }

注意要在webpack.config.js加上我们模板html（或者可以用js生成），要下载插件：

    npm install html-webpack-plugin --save-dev
引入插件

    var HtmlWebpackPlugin = require('html-webpack-plugin');

在webpack.config.js中plugins（插件项中加入）

     new HtmlWebpackPlugin({
            template:__dirname+"/src/index.html"//new 这个插件的实例，并传入相关的参数
        }),

配置完毕，启动npm即可（因为每个人设置的启动npm不一样，我这没有用命令说明。）

    注：主要针对webpack和react配合开发，不是webpack教程，第一次写文章，请谅解！