React项目构建（利用webpack打包）

　　最近React作为当前最为火热的前端框架。最近也相继而出来相关ES7的新语法。

　　当然，在使用React开发web项目的时候，不得不提到的就是与之配套的相应的打包技术，之前上文已经简单的提到React+webpack的相关环境搭建。

　　不过昨天，在技术群聊里，又有人提到，如何更好的利用webpack进行开发与打包。那么今天，我就用一个例子来解释一下，利用webpack来打包react项目与发布的相关配置（包含Request请求和React-router的路由跳转哦）。

准备工作

　　当然需要安装WebStrom和node.js啦~至于下载地址，请看上文：React+Webpack+ES6环境搭建(自定义框架)

让我们跑起来吧

　　首先来说说，本项目基本用到的一些开发组件(package.json)：

开发中需要用到的，我全部放在devDependencies(npm install ...... --save-dev)中;
项目中有用到的组件，我全部放在dependencies(npm install ...... --save)中;

"devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-polyfill": "^6.16.0",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "open": "0.0.5",
    "react-hot-loader": "^3.0.0-beta.6",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "echarts": "^3.3.1",
    "isomorphic-fetch": "^2.2.1",
    "lodash": "^4.17.2",
    "react": "^15.4.0",
    "react-dom": "^15.4.0",
    "react-router": "^3.0.0"
  }

　　接下来，就是server.js的配置，利用于调试以及用户服务端口配置

/**
 * 创建时间：2016年9月19日 10:12:44
 * 创建人：JaminHuang
 * 描述：用于服务端口配置
 */
'use strict';
var open = require('open');
var webpack =require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');

var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
    publicPath:config.output.publicPath,
    hot:true,
    historyApiFallback: true,
    quiet: false,
    noInfo: false,
    filename: "index.js",
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
    },
    headers: {"X-Custom-Header": "yes"},
    stats: {colors: true}
});

server.listen(3010, function (err, result) {
    if (err)console.log(err);
    open('http://localhost:3010');
});

server.js