摘要：再看本篇文章之前，本人還是建議想入坑的童鞋可以選有來創(chuàng)建的項(xiàng)目，因?yàn)楝F(xiàn)在和還不成熟，坑相對(duì)要多一些，當(dāng)然如果你已經(jīng)做好跳坑的準(zhǔn)備，那么請(qǐng)繼續(xù)往下走本文適合對(duì)有一定了解的人。

再看本篇文章之前，本人還是建議想入坑react的童鞋可以選有create-react-app來創(chuàng)建react的項(xiàng)目，因?yàn)楝F(xiàn)在dva和roadhog還不成熟，坑相對(duì)要多一些，當(dāng)然如果你已經(jīng)做好跳坑的準(zhǔn)備，那么請(qǐng)繼續(xù)往下走；

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的項(xiàng)目

安裝 dva 和 roadhog；
    npm i dva-cli roadhog -g 
好啦～現(xiàn)在你已經(jīng)學(xué)會(huì)了怎么安裝dva和roadhog啦，接下來就可以創(chuàng)建項(xiàng)目啦

創(chuàng)建項(xiàng)目
dva new projectName
npm install
npm start

打開瀏覽器輸入localhost:8000,看到歡迎界面證明第二步已經(jīng)成功啦

添加配置文件和安裝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 內(nèi)置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;
    };

到現(xiàn)在你已經(jīng)完成了一半啦 是不是覺得很簡(jiǎn)單。對(duì)啦 這里有一點(diǎn)要注意，復(fù)制 es5-shim.min.js es5-sham.min.js console-polyfill/index.js 文件到 public 文件夾console-polyfill/index.js 改名為 console-polyfill.js

廢話不說 這步直接上代碼（對(duì)應(yīng)的是目錄中的.roadhogrc.js，大學(xué)按步驟下來的話這應(yīng)該是.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: { //下面是在開發(fā)環(huán)境和生產(chǎn)環(huán)境都引入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的項(xiàng)目架子搭建起來，再有就是eslint的配置啦，此處不做講解（http://eslint.org/docs/user-g...）,接下來你可以在src中嘗試著運(yùn)行一下Hello World啦

最后給大家分享一些用到的資料
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/...

項(xiàng)目地址：https://github.com/tengwei30/...