源起
最近在學習Amazeui-react的開發(fā)，發(fā)現(xiàn)react著實是一個好東西，但是蛋疼的是webpack這個東西好難配置，稍不注意就會導致自動編譯失敗，會出現(xiàn)一堆的問題，下面就請跟我一起從零開始學習React+webpack配置，并且如何在webstorm中很好的運用它們。
準備
1、下載webstorm11和nodejs。
下載太慢？直接百度云打包分享吧~~windows mac osx
開始
由于我的電腦的MacBook不是windows，因此可能安裝和操作過程會有略微差異，但是差異不大，下面操作基本通用，不通用的我會指明。或者下面留言即可。
- 首先，確定你已經(jīng)了解了react是干什么的，對react還不了解的請移步這里：react快速入門，我大體總結(jié)下吧：你就直接把react理解成能夠用js實現(xiàn)web前端的組件化開發(fā)的一個框架就好了，它通過虛擬DOM來簡化DOM操作提升性能，同時更好的實現(xiàn)模塊化封裝。再深了也沒必要說了。
- 其次，你還得知道webpack是干什么的，對webpack不了解的請移步這里：webpack官網(wǎng)。這個網(wǎng)站我沒有發(fā)現(xiàn)偏官方的中文站點，但是CSDN上應(yīng)該有很多相關(guān)的教程。webpack是一個構(gòu)建工具，能夠把所有的靜態(tài)資源進行編譯打包，比如.js、.css、.png、.less等等吧，反正只要是靜態(tài)的，不是什么php、jsp之類的動態(tài)網(wǎng)站文件都能打包。通過它統(tǒng)一管理資源和模塊。
- 再次，你還得知道點nodejs的知識，這個網(wǎng)站nodejs中文教程會告訴你nodejs干什么用，都有哪些api。nodejs是一個在服務(wù)器端的高性能javascript框架，能夠快速處理高并發(fā)的請求。它主要用的就是回調(diào)原理，通過它提供的api可以實現(xiàn)一些web請求處理。其中，nodejs包含了一個npm，全稱是node package manager，說白了就是node項目的包管理器，通過npm命令，我們可以使用成千上萬的javascript框架。
- 最后，就是你得會用webstorm了。這個被稱為javascript開發(fā)神器IDE，能夠大大提升你開發(fā)web前端的效率。
綜上，我覺得能進入這篇博客的人想必肯定早就知道以上幾個工具是干什么用的了，否則還進來干嗎？串門啊？
入門
- 安裝完畢上述幾個工具之后，請打開你的命令行工具：windows 按下Windows符號鍵+R，輸入cmd，會彈出命令行工具；mac直接在Launchpad中查找終端即可，Linux跟mac沒啥區(qū)別，自己找終端去，在下面我們姑且統(tǒng)一稱之為命令行。
- 首先在命令行中輸入：npm -v ，看看是否有版本號出現(xiàn)。如果出現(xiàn)了，證明你的nodejs安裝成功了，不需要配置環(huán)境變量。如果沒出現(xiàn)，那么你還得把環(huán)境變量配置一下。不過nodejs默認是給你配置好環(huán)境變量的。
- 配置npm的代理地址：（由于偉大的墻的原因，會導致下載包很慢很慢~~~）
npm config set registry https://registry.npm.taobao.org
- 下面進入正軌了啊！！！提神！注意！看這，看這~~
- 啟動webstorm，初次使用的話會讓你導入以前的配置。如果是以前有配置文件就導入，沒有就選擇初次使用那一項。然后選擇，create new project，建立一個新的工程。工程名就叫做：react_webpack_test吧。
- 點擊OK，進入界面。然后打開webstorm的首選項設(shè)置（windows是File-settings），在Languages & Frameworks的JavaScript一欄選擇JSX Harmony，點擊OK。
- 重新打開命令行，依次輸入
sudo npm install webpack webpack-dev-server babel -g
sudo npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react --save-dev
安裝結(jié)果會顯示一些WARN，無視！但是千萬別有Error。
- 第一條命令是全局安裝，模塊會安裝在/usr/local/,注意全局安裝在mac/linux系統(tǒng)需要sudo然后輸入密碼，而windows不需要sudo哦~第二條會安裝在/node_modules/下面。
參數(shù)解釋：
-g：允許包全局使用
--save-dev:將依賴信息寫入package.json的devdependencies。
安裝的每個組件解釋：
babel：?能將es6語法解析成es5（什么是es？？ECMAScript6入門自己看去，js是它的子集，說白了就是最新的javascript語法），以前是使用jsx-loader來解析著，現(xiàn)在直接用babel替代就行了。
babel-preset-es2015和babel-preset-react：讓babel支持es2015語法和jsx語法的兩個預(yù)設(shè)值。
webpack：這個還用說嗎？
react-dom：依賴于react，現(xiàn)在都是通過ReactDOM.render()方法來渲染而不是React.render(),facebook官方已經(jīng)說了。
webpack-dev-server：webpack開發(fā)服務(wù)器，幫助開發(fā)者實時監(jiān)控webpack項目的文件更改并反映到瀏覽器上。這樣你就能實時地進行預(yù)覽啦~
babel-loader css-loader babel-loader style-loader url-loader file-loader：幾種webpack需要用到的加載器，方便解析css、es6/jsx、和其他靜態(tài)文件。
小提示：
全局安裝支持直接在命令行中啟用安裝包的命令，例如：你安裝了webpack，那么在命令行輸入webpack就會出現(xiàn)相應(yīng)執(zhí)行，但是非全局不支持使用這個命令的哦。
- 接下來，再打開webstorm（最好這兩個工具你都別關(guān)~）。在剛才那個react_webpack_test的工程中創(chuàng)建一個文件，文件名為webpack.config.js，然后在里邊寫上下面的代碼：
var webpack=require('webpack');
var commonsPlugin=new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports={
entry:{index:'./src/js/entry.js'},
output:{
path:'dist',
filename:'bundle.js'
},
module:{
loaders:[
{
test:/\.css$/,
loader:'style-loader!css-loader'
},
{
test:/\.jsx?$/,
loader:'babel',
exclude: /node_modules/,
query:{
presets:['es2015','react']
}
},
{
test:/\.(png|jpg)$/,
loader:'url-loader?limit=8192'
},
{
test:/\.less$/,
loader:'style-loader!css-loader!less-loader'
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
],
plugins:[
commonsPlugin
]
},
resolve:{
root:'',
extensions:['','.js','.json','.less'],
alias:{
AppStore:'js/stores/AppStores.js'
}
}
}
然后在當前工程目錄創(chuàng)建一個src文件夾，在src里面創(chuàng)建一個js文件夾，在js文件夾中新建一個entry.js文件，文件內(nèi)容如下：
var React=require('react');
var ReactDOM=require('react-dom');
ReactDOM.render(<div>Hello world!</div>, document.getElementById("test"));
接下來再在當前工程目錄中新建一個dist文件夾，dist文件夾中新建一個index.html文件。內(nèi)容如下：
<html>
<meta charset="utf-8">
<title>React webpack test</title>
</head>
<body>
<div id="test"></div>
</div>
<script type="text/javascript" src="./bundle.js" charset="utf-8"></script>
</body>
</html>
最后一步，最后一步了哦~~加入package.json文件，使之成為一個可以用npm命令執(zhí)行的工程。
{
"name": "react_webpack_test",
"version": "1.0.0",
"description": "just webpack and react hello world project!",
"scripts": {
"build": "webpack --progress --profile --colors",
"watch": "webpack-dev-server --port 63340 --content-base ./dist/",
"test": "echo \"Error: no test specified\" && exit 1"
}
}
其中最重要的是script標簽。
接下來我們打開webstorm的Terminal功能（在IDE底部）,在里面輸入
npm run build
然后，在你的Terminal里面會顯示如下的東東
> react_webpack_test@1.0.0 build /Users/你的工程所在目錄/react_webpack_test
> webpack \--progress \--profile \--color 2m0ms op1ms optimiz12ms emit
Hash: 292766b53fb3969afd55
Version: webpack 1.12.14
Time: 5109ms
Asset Size Chunks Chunk Names
bundle.js 676 kB 0 [emitted] index
\+ 159 hidden modules
如果里面出現(xiàn)了紅色的Error那么就說明你的工程配置還有一些問題，如果OK的話，打開瀏覽器，在里面運行你的dist/index.html文件，看看是否有：hello world！輸出
- 實時調(diào)試你的代碼~
在webstorm的Terminal中輸入npm run watch，然后會在里面輸出一堆日志，日志中不能出現(xiàn)紅色的Error，同時會輸出下面兩句：
http://localhost:63340/webpack-dev-server/
省略這部分……
webpack: bundle is now VALID.
輸入：http://localhost:63340/webpack-dev-server/，應(yīng)該就可以看到你想要的結(jié)果，結(jié)果如下：
插入圖片哦
- ?這個就是用來充數(shù)的，光棍節(jié)快樂！！
進階
**喝杯茶~
…… **
到了這可以說你的項目就已經(jīng)完成了，如果你想跟我一樣使用Amazeui-react組件，那么就繼續(xù)跟我這樣繼續(xù)下去吧~
- 安裝Amazeui-react
npm install amazeui amazeui-react --save-dev
- 修改./src/js/entry.js文件，替換成以下代碼：
var React=require('react');
var ReactDOM=require('react-dom');
var AMUI=require('amazeui/dist/css/amazeui.min.css');
var AMUIReact = require('amazeui-react');
var button=(
<AMUIReact.Button>這是一個按鈕</AMUIReact.Button>
);
ReactDOM.render(button,document.getElementById("test"));
- Ctrl+S，保存當前代碼，查看你的瀏覽器http://localhost:63340/webpack-dev-server/頁面有沒有變化~~
下面是我的測試工程鏈接，自己下載下來拿去用吧.
react_webpack_test
整整連寫帶測試折騰了我一下午，為了保證每一處寫的沒有疏漏，我現(xiàn)卸載掉我電腦上的webstorm和nodejs~~
