1.創(chuàng)建項(xiàng)目文件夾
2.npm init生成package.json文件
3.創(chuàng)建項(xiàng)目文件
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）
-->處理圖片，在指定的圖片大小范圍內(nèi)自動(dòng)啟用base64編碼圖片（url-loader）
-->安裝第三方庫(kù)（jquery，moment，undersocre之類的庫(kù)）
webpack：
==>1.webpack是整個(gè)環(huán)境的骨架，它能幫助我們進(jìn)行模塊化打包，指定輸入、輸出文件、可以引入各種插件（plugins）以及強(qiáng)大的babel-loader功能（能幫助我們引入sass、處理圖片和其他靜態(tài)文件跟jsx文件）等等
==>2.webpack.config.js文件配置：
entry：頁(yè)面入口文件配置
outout：入口文件輸出配置
plugins：插件項(xiàng)
modul：加載器配置
resolves：其他解決方案配置
devServer：用于配置webpack-dev-server插件
html-webpack-plugin：
==>1.html-webpack-plugin會(huì)在指定的輸出（output）輸出文件夾里生成indexhtml文件，并且其會(huì)自動(dòng)引入同文件夾里面的js、css等文件。
==>2.需在webpack.config.js文件進(jìn)行配置：
var htmlwebpackPlugin = require('html-webpack-plugin')
module.exports={
...
plugins：[
new htmlwebpackPlugin({
title：'這里是網(wǎng)頁(yè)的標(biāo)題'，
})
]
}
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 既可以在項(xiàng)目中使用ES6語(yǔ)法
使用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（這個(gè)包，是專門作為react的優(yōu)化，讓你在代碼中可以使用React ES6 classes的寫法，同時(shí)直接支持JSX語(yǔ)法格式。）
==>6.webpack.config.js文件配置：
module.exports={
loaders:[{
test:/\.jsx?$/, ? //表示 .jsx文件使用 babel來(lái)處理
loader:'babel',? //表示 .jsx文件使用 babel來(lái)處理
include:APP_PATH, ?//包含的文件夾
query:{
//添加兩個(gè)presents 使用這兩種presets處理js或者jsx文件
presets:['es2015','react']
}
}]，
//這里還需要添加一個(gè)resolve的參數(shù)，把jsx這種擴(kuò)展名添加進(jìn)去，這樣就可以在js中import加載jsx這種擴(kuò)展名的腳本
resolve:{
extensions: ['', '.js', '.jsx'] ? //自動(dòng)擴(kuò)展文件后綴名，意味著我們r(jià)equire模塊可以省略不寫后綴名
},
}
添加CSS樣式（.css? .scss）：
==>1. cnpm install css-loader --save-dev? ? //css-loader會(huì)遍歷css文件，找到所有的url(...)并且處理
==>2. cnpm install style-loader --save-dev? //style-loader會(huì)把所有的樣式插入到你頁(yè)面的一個(gè)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' ? ?//注意后面那個(gè)limit的參數(shù)，當(dāng)你圖片大小小于這個(gè)限制的時(shí)候，會(huì)自動(dòng)啟用base64編碼圖片
}
]
}
}
安裝第三方庫(kù)（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() );
