react基於webpack和babel以及es6的項目搭建

項目demo地址https://github.com/aushion/webpack_reac_config

1.打開命令提示窗口，輸入

mkdir react_test
cd react_test
npm init

2.會在文件夾根目錄生成package.json文件，同時咱們的項目結構以下

• app
  index.js
  
• build
  bundle.js(自動生成)
• index.html
  
• package.json
• webapck.config.dev.js(開發環境配置)
  
• webpack.config.prod.js(生產環境配置)
  
• server.js(配合webpack啓動開發服務，支持熱更新)
  
• .babelrc(babel解析es6,react的配置)

3.在package.json中配置好咱們須要的依賴

"devDependencies": {  
 "babel-core": "^6.9.0",  
 "babel-loader": "^6.2.4",  
 "babel-plugin-react-transform": "^2.0.2",  
 "babel-plugin-rewire": "^1.0.0-rc-3",  
 "babel-plugin-transform-react-constant-elements": "^6.8.0",  
 "babel-plugin-transform-react-inline-elements": "^6.8.0",  
 "babel-plugin-transform-react-remove-prop-types": "^0.2.7",  
 "babel-plugin-transform-runtime": "^6.9.0",  
 "babel-preset-es2015": "^6.9.0",  
 "babel-preset-node5": "^11.1.0",  
 "babel-preset-react": "^6.5.0",  
 "babel-preset-react-hmre": "^1.1.1",  
 "babel-preset-stage-0": "^6.5.0",  
 "css-loader": "^0.23.1",  
 "eslint": "^3.1.0",  
 "eslint-plugin-react": "^5.2.2",  
 "jquery": "^3.1.0",  
 "react-transform-catch-errors": "^1.0.2",  
 "react-transform-hmr": "^1.0.4",  
 "redbox-react": "^1.2.10",  
 "url-loader": "^0.5.7",  
 "webpack": "^1.13.1",  
 "webpack-dev-server": "^1.14.1"  
},

"dependencies": {  
 "react": "latest",  
 "react-dom": "latest"  
}

4.回到項目根目錄cmd，輸入npm install開始安裝依賴，等待依賴安裝完成(會自動生成node_modules文件夾，全部依賴模塊都安裝在其中)

5.依賴安裝完成開始配置webpack.config.dev.js(開發環境），webpack.config.prod.js(生產環境）

這份文件大概有四個配置項entry, output, module, plugins.
entry:指定打包的入口文件，每有一個鍵值對，就是一個入口文件。
output：配置打包結果，path定義了輸出的文件夾，filename則定義了打包結果文件的名稱，filename裏面的[name]會由entry中的鍵替換,例子中的/build/bundle.js即是生成的文件。
resolve：定義瞭解析模塊路徑時的配置，經常使用的就是extensions，能夠用來指定模塊的後綴，這樣在引入模塊時就不須要寫後綴了，會自動補全.
module：定義了對模塊的處理邏輯，這裏能夠用loaders定義了一系列的加載器，以及一些正則。當須要加載的文件匹配test的正則時，就會進行處理。這裏咱們使用了react-hot 和 babel。babel-loader是咱們使用ES-6進行開發時用於生成JS文件。
最後咱們生成了一個style.css僅僅作個例子，告訴咱們如何引入樣式文件，實際上咱們能夠加載諸如sass-loader這樣的加載器。
loader:對文件進行處理，這正是webpack強大的緣由。好比定義了凡是.js結尾的文件都是用babel-loader作處理，而.jsx結尾的文件會先通過jsx-loader處理，而後通過babel-loader處理。固然這些loader也須要經過npm install安裝。
plugins: 這裏定義了須要使用的插件，好比commonsPlugin在打包多個入口文件時會提取出公用的部分，生成common.js。

6.單獨寫一個server.js以搭配webpack-dev-server來啓動開發環境服務及熱更新代碼服務

7.想要babel解析react，以及es2015，須要添加.babelrc文件，寫入配置（也能夠不寫.babelrc文件，直接把配置寫在package.json中）

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
       "presets": ["react-hmre"]
     }
   }
}

8.package.json文件下的script屬性增長爲

"start": "node server.js",   //啓動開發環境服務
"build": "webpack --config webpack.config.prod.js --progress --colors" //生產環境打包

9.npm start 啓動項目 瀏覽器輸入http://localhost:3000 完成

10.調試