一：搭建架子
创建一个项目需要依赖很多文件，为了便于管理所以用nodejs里面的npm包来管理
1、项目初始化
使用命令npm init
创建一个初始文件package.json，这个文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。
2、项目依赖包的安装
首先使用以下命令安装四个包
npm install --save react react-dom babelify babel-preset-react
以及为了使用es2015而安装的包
npm install babel-preset-es2015
为了使这些依赖包的信息能够在我们的package.json文件里显示，所以我们要加上 --save,当然如果你是mac或者linux用户为了避免权限问题，加上sudo。
3、自动化工具webpack
我们使用的很多模块是不能直接使用的，要经过一定的处理才能拿来用，而处理这些问题的依赖包实在是太多，很麻烦，所以webpack应运而生。
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
下面我们说一下怎么安装及使用webpack：
a、首先全局安装webpack，输入命令sudo npm install -g webpack
b、再装个nodejs的一个服务器，用于服务webpack的包，命令sudo npm install -g webpack-dev-server
c、以上是在全局安装，所以我们在自己项目目录下去掉-g在安装一次，注意加上--save，以便记录在package.json里面
d、安装完之后，建立一个webpack.config.js，然后配置一下里面的信息
e、当在使用webpack时，可以直接使用webpack执行一次，就可以得到你想要的结果。当然每当你有修改时都需要从新执行一遍webpack，这会很不方便，所以我们可以使用webpack --watch，进行实时监听
f、如果想要浏览器实时刷新的话，就要用到webpack-dev-server了，输入命令webpack-dev-server，它会自动给你部署一个路径，然后你登进去就可以看到实时更新的页面了,当然如果你想修改一下它部署服务器的地址的话，你需要输入# webpack-dev-server --contentbase src --inline --hot
g、需要安装的包有如下
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babelify": "^7.3.0",
"css-loader": "^0.25.0",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-mixin": "^2.0.2",
"react-router": "^4.2.0",
"style-loader": "^0.13.2",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
