使用webpack + react 构建应用的基本流程与注意事项

构建react应用，使用es6风格写法是最合适的。所以要使用babel进行编译，而且由于react的jsx语法自成一套，所以解析标准要包含es2015和react

webpack部分

---

模块依赖：

babel模块：

    babel-core
    babel-loader
    babel-preset-es2015
    babel-preset-react

css、less、img url 加载模块:

    css-loader
    less-loader
    style-loader
    url-loader

react模块:

   react
   react-dom
   react-router  // react路由
   react-addons-css-transition-group // 动画过渡

webpack中的实用插件：

1.js代码压缩优化插件: webpack.optimize.UglifyJsPlugin
在开发模式下使用react的时候, react会给出很多友好的提示，以及给出各种调试信息，而且文件没有压缩，十分巨大，而使用其他的方式进行压缩时，react-dom还会给出警告，所以可以直接使用webpack的插件进行压缩

  // js代码压缩优化
var UglifyJs = new webpack.optimize.UglifyJsPlugin({

    output: {
        comments: false,
    },
    compress: {
        warnings: false
    }

});

2.css代码单独打包出去:

  // css单独打包插件
  var ExtractTextPlugin = require('extract-text-webpack-plugin');

3. 定义开发环境，让开发环境与node环境关联起来：

    // 开启生产环境模式, 启动时要通过NODE_ENV=production来启动
    var Define = new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
      }
    });

备注： 这样关联起来之后, 在发布生产环境代码的时候，就应该这样调用:

  NODE_ENV=production webpack

react部分

---

react推崇组件化开发, 所以可以把页面中的一切都组件化起来，由于配合了webpack分析模块依赖，所以不仅js可以模块化，css甚至img也可以模块化，把一个功能所需的视图、css、js、img、单独管理起来，就可以很好地做成一个组件了。

所以我的项目目录里有个widget文件夹(也可以叫component)， 文件夹的结构如下:

    widget
       --- 导航组件(NavBox)
             |导航组件jsx
             |导航组件less
       --- 轮播组件(SlideBox)
             |轮播组件jsx
             |轮播组件less

然后是使用react-router
react-router是一个很大的东西，建议直接查看相关的官方文档