在看这篇文章之前，还是建议想进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；npmidva-cliroadhog-gok~现在你已经学会了如何安装dva和roadhog，接下来就可以创建一个项目了第二步创建一个项目dvanewprojectNamenpminstallnpmstart打开浏览器输入localhost:8000，看到欢迎界面就证明第二步成功了。第三步，添加配置文件，安装webpack。安装lodashbabel-pluginwebpack-pluginshim并在package.json文件中添加Gonpminstall--save-devwebpackinstalllocalwebpackconfigurationfilewebpackfile//webpackconfigurationimportglobfrom'glob';从'webpack'导入webpack；从'lodash'导入{isRegExp};从“postcss-pxtorem”导入pxtorem；从“html-webpack-plugin”导入HtmlWebpackPlugin；从'extract-text-webpack-plugin'导入ExtractTextPlugin；从“lodash-webpack-plugin”导入LodashModuleReplacementPlugin；constpath=require('路径');导出默认值（我们bpackConfig,env)=>{constloaders=webpackConfig.module.loaders;constpostcss=webpackConfig.postcss;webpackConfig.postcss=function(){constpostcssArray=postcss();postcssArray.push(pxtorem({rootValue:100,propWhiteList:[]}));返回postcssArray；};constsvgDirs=[require.resolve('antd-mobile').replace(/warn\.js$/,''),//antd-mobile放置svg//引入antd-mobilepath.resolve(__dirname,'src/资产/图标'),];loaders.forEach((loader)=>{if(loader.test&&loader.test.toString()==='/\\.svg$/'){loader.exclude=svgDirs;}});loaders.unshift({test:/\.svg$/,loader:'svg-sprite',include:svgDirs});constnoParse=webpackConfig.module.noParse;if(Array.isArray(noParse)){noParse.push(/moment.js/);}elseif(noParse){webpackConfig.module.noParse=[noParse,/moment.js/];}else{webpackConfig.module.noParse=[/moment.js/];}//lodashwebpackConfig.babel.plugins.push('lodash');webpackConfig.plugins.push(newLodashModuleReplacementPlugin());loaders.push({test:/\.(png|jpg|jpeg|gif)(\?v=\d+\.\d+\.\d+)?$/i,loader:'file'});//打包配置if(env==='production'){//添加hashwebpackConfig.output.filename='[name].[chunkhash:6].js';webpackConfig.output.chunkFilename='[name].[chunkhash:6].js';webpackConfig.plugins.forEach((plugin,index,plugins)=>{if(plugininstanceofExtractTextPlugin){plugins[index]=newExtractTextPlugin('[name].[chunkhash:6].css',{disable:false,allChunks:true});}elseif(plugininstanceofwebpack.optimize.CommonsChunkPlugin){plugins[index]=newwebpack.optimize.CommonsChunkPlugin('common','common.[chunkhash:6].js');}});}//HTMLwebpackConfig.module.loaders=loaders.filter(loader=>isRegExp(loader.test)&&loader.test.toString()!=='/\\.html$/');webpackConfig.plugins.push(newHtmlWebpackPlugin({//favicon:'./src/logo/logo.ico',template:'./src/index.html',filename:'index.html',inject:true}));返回网络包配置；};到目前为止你已经完成了一半，你不觉得这很容易吗？是的，这里需要注意一点，将es5-shim.min.jses5-sham.min.jsconsole-polyfill/index.js文件复制到公用文件夹console-polyfill/index.js中，重命名为console-polyfill.js四步roadhog、proxy配置、antd-mobile介绍，废话不多说，这一步直接上传代码（对应目录下的.roadhogrc.js，如果大学按步骤走，这应该是.roadhogrc.json文件，不过我还是比较喜欢js语法，所以做了修改，因人而异）importpathfrom'path';exportdefault{'/api':{target:'localhost',//这里是你的接口地址，我随便写changeOrigin:true},multipage:true,theme:'antd.config.js',entry:['src/common.js','src/index.js'],env:{//下面是开发环境将antd-mobile开发引入生产环境:{extraBabelPlugins:['dva-hmr','transform-runtime',['import',{libraryName:'antd-mobile',style:true}]]},production:{extraBabelPlugins:['transform-runtime',['import',{libraryName:'antd-mobile',风格:真}]]}}};嗯，以上四步就差不多可以用dva转换react了项目架子搭建好了，接下来就是eslint的配置，这里就不多说了（http://eslint.org/docs/user-g...），那你可以试试运行HelloWorldinsrc另外需要注意的是，dva在构建项目的时候，会默认安装redux和react-router，所以在开发的时候不要安装，因为版本不兼容导致项目运行不了；最后分享给大家一些资料用到了antd主题的制定：https://ant.design/docs/react...roadhog:https://github.com/sorrycc/ro...webpack中proxy配置：https://网络包。github.io/doc...redux：http://www.redux.org.cn/react-router：http://react-guide.github.io/...项目地址：https://github。com/tengwei30/...更多精彩，敬请期待。.
