1.react 簡介
React 是一個Facebook出品的前端UI開發框架。react官方的 tutorials 為了讓人容易上手，並沒有給在平常工作使用react的詳細配置，隨意學習的深入，你為了調試代碼會不斷的自己重新reload 頁面來看效果。如果中間出錯，還要一步步的重來，這是一件非常影響效率和打擊積極性的事， 下面我們將使用webpack來一步步實現自動構建的詳細過程。磨刀不誤砍柴功，一勞永逸哦~ 保存剛寫的代碼，就會馬上在頁面上看到結果，非常省時的關鍵步驟！非常炫酷！
2. 創建一個新目錄並用npm初始化它
mkdir react-playground cd react-playground npm init
3.安裝和配置webpack
webpack 是一個bundler module， 它可以根據配置把項目中各種復雜的依賴關系組織起來，生成對應的js png等靜態assets，使用起來也非常簡單，我們只是需要 按照官網的指示走一次就知道了。
3.1 安裝webpack,webpack-dev-server 及必要的依賴
先在package.json中增加需要安裝的依賴(它是npm用來管理package的配置文件)
{
"name": "react-playground",
"version": "0.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"babel-loader": "^6.2.0",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.1"
},
"devDependencies": {},
"scripts": {
"dev": "./node_modules/.bin/webpack-dev-server --content-base src/public --inline --hot",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
再運行npm安裝
npm install
這樣安裝的依賴都是在項目的node_module/下，這也是應該推薦模式，盡量不要使用全局安裝，特別是在多個項目使用的同一個依賴的版本不一致的時候，非常蛋疼。 為了即時reload我們寫的代碼，我們使用了webpack-dev-server， 只要我們運行 npm run dev 。
3.2 配置webpack
官網配置項說明, 我們這里使用一個簡化的配置（指定好輸入/輸出的文件路徑），來體驗一下它的基本功能。
var webpack = require('webpack'); var path = require('path'); module.exports = { context: path.join(__dirname, "src"), // The base directory (absolute path!) for resolving the entry option entry: "./client.js", //The entry point for the bundle. module: { loaders: [ { test: /\.jsx?$/, //A condition that must be met exclude: /(node_modules|bower_components)/, // A condition that must not be met loader: 'babel-loader', //A string of “!” separated loaders query: { presets: ['react', 'es2015', 'stage-0'], plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], } } ] }, output: { path: __dirname + "/src/public", filename: "client.min.js" } };
這個配置最主要的一件事就是把 src/client.js 編碼成 src/public/client.min.js
3.3 增加必要文件
我們在上一步的webpack里面指定了應該從entry: src/client.js來打包文件，所以我們先在client.js里面寫隨意寫點輸出點東西
console.log("Hello React");
我們還需要一個index.html來調用打包完成的client.min.js 這樣我們才能看到結果。
<html> <head> <meta charset="utf-8"> <title>React.js using NPM, Babel6 and Webpack</title> </head> <body> <div id="app" /> <script src="client.min.js" type="text/javascript"></script> </body> </html>
3.4 運行webpack-dev-server
npm run dev
打開http://localhost:8080/ 就可以編輯的代碼一保存就在文章開頭gif頁面上的效果啦。
4. 容易犯的錯
1. 在package.json 里面關於 web-dev-server 命令啟動時是
"dev": "./node_modules/.bin/webpack-dev-server --content-base src/public --inline --hot",
它使用--content-base路徑是 src/public，所以index.html也應該放到這個目錄下
5. 總結
歡迎訂閱~