1.创建项目文件夹
2.npm init生成package.json文件
3.创建项目文件
4.安装插件：
-->webpack
--> html-webpack-plugin
-->webpack-dev-server
--> babel-preset-es2015
--> 使用react所需的插件（babel-core、babel-loader、bebel-react-preset 、react、react-dom）
-->添加CSS样式.css .scss（css-loader、style-loader、sass-loader）
-->处理图片，在指定的图片大小范围内自动启用base64编码图片（url-loader）
-->安装第三方库（jquery，moment，undersocre之类的库）
webpack：
==>1.webpack是整个环境的骨架，它能帮助我们进行模块化打包，指定输入、输出文件、可以引入各种插件（plugins）以及强大的babel-loader功能（能帮助我们引入sass、处理图片和其他静态文件跟jsx文件）等等
==>2.webpack.config.js文件配置：
entry：页面入口文件配置
outout：入口文件输出配置
plugins：插件项
modul：加载器配置
resolves：其他解决方案配置
devServer：用于配置webpack-dev-server插件
html-webpack-plugin：
==>1.html-webpack-plugin会在指定的输出（output）输出文件夹里生成indexhtml文件，并且其会自动引入同文件夹里面的js、css等文件。
==>2.需在webpack.config.js文件进行配置：
var htmlwebpackPlugin = require('html-webpack-plugin')
module.exports={
...
plugins：[
new htmlwebpackPlugin({
title：'这里是网页的标题'，
})
]
}
webpack-dev-server：
==>1. cnpm install webpack-dev-server --save-dev
==>2. webpack.config.js文件配置：
module.exports={
devServer:{
historyApiFallback:true,
hot:true,
inline:true,
progress:true,
}
}
==>3. 在package.json文件配置命令：
"scripts": {
"start": "webpack-dev-server --hot --inline"
},
==>4. 浏览器输入：localhost:8080
babel-preset-es2015：
==>1.本地安装 cnpm install babel-preset-es2015 --save-dev 既可以在项目中使用ES6语法
使用react所需的插件（react、react-dom、babel-core、babel-loader、bebel-preset-react）：
==>1.cnpm install react --save
==>2.cnpm install react-dom --save
==>3.cnpm install babel-core --save-dev
==->4.cnpm install babel-loader --save-dev
==>5.cnpm install babel-preset-react --save-dev（这个包，是专门作为react的优化，让你在代码中可以使用React ES6 classes的写法，同时直接支持JSX语法格式。）
==>6.webpack.config.js文件配置：
module.exports={
loaders:[{
test:/\.jsx?$/, //表示 .jsx文件使用 babel来处理
loader:'babel', //表示 .jsx文件使用 babel来处理
include:APP_PATH, //包含的文件夹
query:{
//添加两个presents 使用这两种presets处理js或者jsx文件
presets:['es2015','react']
}
}]，
//这里还需要添加一个resolve的参数，把jsx这种扩展名添加进去，这样就可以在js中import加载jsx这种扩展名的脚本
resolve:{
extensions: ['', '.js', '.jsx'] //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
},
}
添加CSS样式（.css .scss）：
==>1. cnpm install css-loader --save-dev //css-loader会遍历css文件，找到所有的url(...)并且处理
==>2. cnpm install style-loader --save-dev //style-loader会把所有的样式插入到你页面的一个style tag中
==>3. cnpm install sass-loader --save-dev
==>4. cnpm install node-sass --save-dev
==>5. webpack.config.js文件配置：
module.exports={
module:{
loaders:[
{
test:/\.css$/,
loaders:[ 'style' , 'css' ],
include:APP_PATH,
}
]
}
}
==>5. 在index.js中引入css文件或scss文件
require('./main.css'); 或 require('./main.scss');
处理图片：
==>1. cnpm install url-loader --save-dev
==>2. 配置webpack.config.js文件：
module.exports={
module:{
loaders:[
{
test：test:/\.(png|jpg)$/,
loader:'url?limit=40000' //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片
}
]
}
}
安装第三方库（jquery 、moment）：
==>1. 安装jquery：cnpm install jquery --save-dev
==>2. 在js中引用它： var $ = require（' jquery '）;
==>3. 安装moment：cnpm install moment --save-dev
==>4. 在js中引用它：var moment = require('moment');
==>5. 使用，如：$('body').append('look at me! now is ' + moment().format() );
