第一步：安装npm,cnpm,node，webpack是一个基于node的项目。
第二步：全局安装webpack命令：
cnpm install webpack –g
cnpm install webpack-cli –g(在webpack 3 中，webpack本身和它的cli以前都是在同一个包中，但是第四版，他们已经将两者分开来更好的管理他们，因此需要全局安装webpack-cli)
在新建的文件夹下输入以下命令：
cnpm init(安装webpack依赖，会在对应的文件夹下生成package.json)
cnpm install webpack --save-dev webpack webpack-cli（将webpack的模块添加到本地项目中，此时会生成一个本地的模块目录node_modules）
第三步：配置webpack.config.js
在项目根目录建立webpack.config.js文件，这个文件是进行webpack配置的，先建立基本的入口和出口文件
第四步：新建index.html文件
在根目录新建index.html文件，并引入webpack设置中的出口文件，
第五步：测试webpack配置
在入口文件src/js/app.js写入下面代码，并进行打包测试
加入打包命令
打开package.json文件，在scripts属性中加入build命令
在终端输入npm run build，就可以看到打包结果了。如果没有出现错误，在浏览器打开，可以看到我们的编写结果。到这步为止，我们正确安装了webpack，并进行了出入口的配置，也看到了webpack的输出结果
第六步：开发服务器配置
我们现在缺少一个实时更新的服务，那动手马上配置一个
在命令行安装webpack-dev-server,在终端中输入下面的命令
cnpm install –save-dev webpack-dev-server
安装完成后，配置webpack.config.js文件
配置好后在package.json里增加一个scripts命令，我们起名叫server
这里的—open是直接打开浏览器的意思，这些都配置好后，在终端输入npm run server,会自动打开浏览器localhost:1717
第七步：自动刷新浏览器
在我们修改代码时，现在并不能自动刷新浏览器，不会立即呈现我们编写的代码结果，而是要再次npm run build 才可以。
其实只要在webpack.config.js文件配置中加一个publicPath:’temp/’,然后在index.html引入JS时写这个temp地址就可以实时预览了。
index.html文件引入js
第八步：babel安装配置
在webpack中配置babel需要先加入babel-loader，这里我们使用cnpm进行安装，
cnpm install –save-dev babel-core babel-loader babel-preset-es2015 babel-preset-env babel-preset-react
(babel已经弃用babel-preset-es2015,babel-preset-env替补)
安装好后可以在package.json中看到这些包的版本
第九步：配置module
在安装完成后，可以到webpack.config.js里配置module，也就是配置我们常说的loader
第十步：编写react
webpack通过上面的步骤，基本已经配置完成了，下面写一个react文件进行测试。
安装react和react-dom
cnpm install –save react react-dom
安装完成后，改写app.js文件，把原来的js代码改为react代码
因为上面我们加了一个app选择器，所以在index.html中增加一个div标签，并把id设置成app
index.html
都配置完了，我们可以使用之前配置好的npm run server命令进行预览，如果浏览器看到hello react 说明配置成功了。
项目目录
运行结果：npm run server
总结：其实自己配置react开发环境在实际工作中并不多，因为我们的配置毕竟不是很成熟，而且支持较少。这里通过一步步配置只是为了更好的掌握react构建过程和设置参数，实际工作尽量选择合适的脚手架工具。
React项目其他构建方式
create-react-app快速脚手架
cnpm install –g create-react-app
create-react-app my-app
刚开始报错，是因为这个命令执行的时候，会安装一些包，默认还是使用npm ，所以我们在安装了淘宝镜像cnpm之后，应再将cnpm设置为默认的安装方式，（
安装cnpm：npm install –g cnpm –registry=https://registry.npm.taobao.org
设置为默认：npm config set registry https://registry.npm.taobao.org
）就可以正常执行了
生成目录结构
三个文件夹
node_modules //用来盛放你安装的所有node模块的文件夹
public //用来盛放所有公共资源的文件夹，比如html模板，项目图标
src //用来盛放你自己代码的文件夹，默认生成app.js代码也在里面
四个文件
.gitignore //这个是用来定义那些在提交到远程代码库时要忽略的文件
package.json //用来声明项目的各种模块安装信息，脚本信息等
package-lock.json //用来锁定模块安装版本的，能确保大家安装的模块版本一致
README.md //盛放关于这个项目的说明文件
src文件夹下registerServiceWorker.js文件//此文件能进行缓存一些资源，一般是用到生产环境的，主要是用来加快访问速度。
没有配置文件webpack.config.js
注意pulic/index.html是启动http服务器的首页。src/index.js是编译的入口文件，只能叫index改成别的不行。
cd my-app
cnpm run start
f12查看源码，你会看到
/static/js/bundle.js
在你的项目my-app你是看不到这个文件路径的，你也没有写配置文件webpack.config.js，http服务器配置，自动打开浏览器窗口，react，es6语法编译，babel-core,webpack等等这些，你都没下载，配置。这些react –scripts都帮你做了。
打开my-app\node_modules\react-scripts这个文件夹下进行查看相应配置
打包为生产版
现在开始进行生成生产环境的代码，所谓生产环境就是指用来发布的到服务器里面的代码，是根据我们开发环境的代码生成的
执行命令：cnpm run build
执行此命令后，他会在我们的项目目录下创建一个build文件夹，里面存放的就是生产环境需要的代码了。
将其放在服务器中执行
生产环境中的代码生成后就要开始发布了，也就是放到我们的服务器上，供用户访问使用，直接将build里面的所有文件复制到服务器的根目录下即可，（我是直接复制到我本地的Apach服务器的根目录里面的）
在浏览器输入192.168.0.111就可以访问，内外网皆可。
注意：如果你不想将文件复制到根目录，那么你需要修改index.html文件中对js和css文件的路径，不然无法正常访问 。
部署到服务器上后的维护
1.当要开发新功能时，我们直接在本地开发好，然后打包生产文件，最后放到远程服务器里面就可以了。
2.当出现问题后，我们可以直接在浏览器里面访问，然后在线打开控制台调试，并修改运行中的HTML代码，当改好后在本地修改即可。