搭建react实时热更新开发环境。当代码发生变化时，不需要重启webpack打包文件，这样会大大提高我们的开发效率。使用工具vscode编辑器，可以实时推送git更新内置的git命令行，随意下载各种语言框架代码格式化和高亮插件。chrome^58浏览器性能稳定，方便实时调试。js后台运行环境gitbash命令行工具，方便的命令行命令输入搭建开发环境1.创建文件夹，初始化npm配置文件$mkdirreact-1&&cdreact-1&&npminit2.安装reactreact-domreact-routerreact-router-dom必备的核心模块$npmi--savereactreact-domreact-routerreact-router-dom3.全局安装webpackwebpack-dev-server用于打包文件并建立一个实时更新的服务器系统，你可以使用webpack命令行$npmi-gwebpackwebpack-dev-server4。在项目文件夹下安装webpackwebpack-dev-serverbabel-loaderbabel-corebabel-preset-es2015babel-preset-react等开发模块，babel相关用于转码es6和jsx语法$npminstall--save-devwebpackwebpack-dev-serverbabel-loaderbabel-corebabel-preset-es2015babel-preset-react5.配置webpack.congfig.js文件指定打包后的loader和入口文件路径的文件路径和文件名。//webpack.config.jsvarwebpack=require('webpack')varpath=require('path')module.exports={context:__dirname+'/src',entry:"./js/index.js",devServer:{inline:true},module:{loaders:[{test:/\.jsx?$/,exclude:/(node_modules)/,loader:'babel-loader',query:{presets:['react','es2015']}}]},output:{path:__dirname+'/output/',filename:'bundle.js'}}文件目录如下注意bundle.js文件打包后存在内存中这时，so在Index.html中只能用src="./bundle.js"来引用。不能添加相对路径文件夹output/！这样，我们在命令行输入webpack-dev-server打开浏览器，输入生成的URL，它会自动更改代码后，实时刷新浏览器。完成React开发环境设置。其他如自动打开浏览器、拆分代码等功能，可参考webpack官网指南。
