再看本篇文章之前，本人还是建议想入坑react的童鞋可以选有create-react-app来创建react的项目，因为现在dva和roadhog还不成熟，坑相对要多一些，当然如果你已经做好跳坑的准备，那么请继续往下走；

本文适合对 ES6+webpack 有一定了解的人。没有的了解的同学可以先看看下面的我分享的链接，

ES6: http://www.jianshu.com/p/ebfe...
Webpack: https://doc.webpack-china.org...
react: https://facebook.github.io/re...
antd-mobile:https://mobile.ant.design/doc...

扯完啦，接下来就是正题啦，先看效果

今天主要是想给大家说一下怎么用dva来搭建react的项目

第一步

安装 dva 和 roadhog；

    npm i dva-cli roadhog -g

好啦～现在你已经学会了怎么安装dva和roadhog啦，接下来就可以创建项目啦

第二步

创建项目

dva new projectName

npm install

npm start

打开浏览器输入localhost:8000,看到欢迎界面证明第二步已经成功啦

第三步

添加配置文件和安装webpack

安装 lodash babel-plugin webpack-plugin shim 并添加到package.json文件中

npm install --save-dev webpack 安装本地webpack配置文件

webpack 文件

    // webpack配置

    import glob from 'glob';

    import webpack from 'webpack';

    import { isRegExp } from 'lodash';

    import pxtorem from 'postcss-pxtorem';

    import HtmlWebpackPlugin from 'html-webpack-plugin';

    import ExtractTextPlugin from 'extract-text-webpack-plugin';

    import LodashModuleReplacementPlugin from 'lodash-webpack-plugin';

    const path = require('path');

    export default ( webpackConfig, env ) => {

      const loaders = webpackConfig.module.loaders;

      const postcss = webpackConfig.postcss;

      webpackConfig.postcss = function () {

        const postcssArray = postcss();

        postcssArray.push( pxtorem( {

          rootValue: 100,

          propWhiteList: []

        } ) );

        return postcssArray;

      };

      const svgDirs = [

        require.resolve( 'antd-mobile' ).replace( /warn\.js$/, '' ), // antd-mobile 内置svg    // 引入antd-mobile

        path.resolve(__dirname, 'src/assets/icon'),

      ];

      loaders.forEach( ( loader ) => {

        if ( loader.test && loader.test.toString() === '/\\.svg$/' ) {

          loader.exclude = svgDirs;

        }

      } );

      loaders.unshift( {

        test: /\.svg$/,

        loader: 'svg-sprite',

        include: svgDirs

      } );

      const noParse = webpackConfig.module.noParse;

      if ( Array.isArray( noParse ) ) {

        noParse.push( /moment.js/ );

      }

      else if ( noParse ) {

        webpackConfig.module.noParse = [ noParse, /moment.js/ ];

      }

      else {

        webpackConfig.module.noParse = [ /moment.js/ ];

      }

      // lodash

      webpackConfig.babel.plugins.push( 'lodash' );

      webpackConfig.plugins.push( new LodashModuleReplacementPlugin() );

      loaders.push( {

        test: /\.(png|jpg|jpeg|gif)(\?v=\d+\.\d+\.\d+)?$/i,

        loader: 'file'

      } );

      // 打包配置

      if ( env === 'production' ) {

         //添加hash

        webpackConfig.output.filename = '[name].[chunkhash:6].js';

        webpackConfig.output.chunkFilename = '[name].[chunkhash:6].js';

        webpackConfig.plugins.forEach( ( plugin, index, plugins ) => {

          if ( plugin instanceof ExtractTextPlugin ) {

            plugins[ index ] = new ExtractTextPlugin( '[name].[chunkhash:6].css', {

              disable: false,

              allChunks: true

            } );

          }

          else if ( plugin instanceof webpack.optimize.CommonsChunkPlugin ) {

            plugins[ index ] = new webpack.optimize.CommonsChunkPlugin(

                'common',

                'common.[chunkhash:6].js'

            );

          }

        } );

      }

      //HTML

      webpackConfig.module.loaders = loaders.filter(

              loader => isRegExp( loader.test ) && loader.test.toString() !== '/\\.html$/'

      );

      webpackConfig.plugins.push(

          new HtmlWebpackPlugin( {

            // favicon: './src/logo/logo.ico',

            template: './src/index.html',

            filename: 'index.html',

            inject: true

          } )

      );

      return webpackConfig;

    };

到现在你已经完成了一半啦 是不是觉得很简单。对啦 这里有一点要注意，复制 es5-shim.min.js es5-sham.min.js console-polyfill/index.js 文件到 public 文件夹console-polyfill/index.js 改名为 console-polyfill.js

第四步 roadhog、proxy配置和antd-mobile引入

废话不说 这步直接上代码（对应的是目录中的.roadhogrc.js，大学按步骤下来的话这应该是.roadhogrc.json的文件，但是本人还是比较喜欢js语法，所以做了修改，此处因人而异）

     import path from 'path';

    export default {

     '/api': {

        target:'localhost',//这里是你的接口地址，我随便写的

        changeOrigin: true

      },

      multipage: true,

      theme: 'antd.config.js',

      entry: [ 'src/common.js', 'src/index.js' ],

      env: { //下面是在开发环境和生产环境都引入antd-mobile

        development: {

          extraBabelPlugins: [

            'dva-hmr',

            'transform-runtime',

            [ 'import', { libraryName: 'antd-mobile', style: true }]

          ]

        },

        production: {

          extraBabelPlugins: [

            'transform-runtime',

            [ 'import', { libraryName: 'antd-mobile', style: true }]

          ]

        }

      }

    };

    

好啦，以上四步差不多就可以用dva把react的项目架子搭建起来，再有就是eslint的配置啦，此处不做讲解（http://eslint.org/docs/user-g...）,接下来你可以在src中尝试着运行一下Hello World啦

还有一个点需要注意的是，dva 建项目的时候会默认安装redux和react-router，所以在开发中千万不要在去安装，会因为版本不兼容而导致项目无法运行；

最后给大家分享一些用到的资料
antd主题制定: https://ant.design/docs/react...
roadhog: https://github.com/sorrycc/ro...
webpack中proxy配置: https://webpack.github.io/doc...
redux: http://www.redux.org.cn/
react-router: http://react-guide.github.io/...

项目地址：https://github.com/tengwei30/...

更多精彩敬请期待。。。