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

查看更多关于React项目构建（利用webpack打包）的详细内容...