【webpack】你好
一直以來我都使用 gulp 作為開發時的編譯工具，一直到有人跟我說 webpack 比較屌我也終於開研究一下 webpack。
原理我就不說了，我也不太清楚，但我目前是這樣使用它
首先你要先灌它：
npm install webpack -g
然後建立一個資料夾，比方說叫 demo
mkdir demo
cd demo
進去 demo 之後我們要建立一個叫 webpack.config.js 的設定檔：
touch webpack.config.js
然後我們該案例要使用 react.js 跟 jsx 語法，所以我們要灌一下它們：
npm init
npm install --save react jsx-loader
↑這個動作會幫我們建立 package.json 檔，然後每當我們 install --save [package] 時，它就會幫我們在 該檔裡的 dependencies 註記相依關係。
再來打開 webpack.config.js，編輯成以下程式碼
entry 是我們程式的進入點
output 是指它最後的輸出路徑。
resolve可以讓我們在程式中 require js, jsx 檔時可以忽略副檔名。
module 是我們的編譯時要選用的 loader。比方說遇到 jsx 就執行 jsx-loader
然後我們再建立 index.html
touch index.html
編輯一下它：
這邊只需要在 body 裡內嵌一個 bundle.js 就好了。
然後我們再建立一下 app/js/boot.jsx
touch app/js/boot.jsx
編輯一下它：
如果你有在用 snippet的話，你可以灌一下 react snippets 很方便
首先我們使用 React 物件，所以我們要 require 它嘛，然後使用立即執行的暱名函數 (function(){ …. }()); 來包我們的程式。
裡面我們使用 React.createFactory 來產生一個 MainApp 工廠物件，來源是 ./views/MainApp.jsx (等下會新增) 然後把 MainApp 物件用 React.render 執行到 body, render 出來。
建立 app/js/views/MainApp.jsx
touch app/js/views/MainApp.jsx
然後編輯一下它：
MainApp.jsx 裡在下面的 return 裡有使用 <Header /> component，所以最上面要內嵌一個 Header.jsx 檔
然後我們來建立 ./Header.jsx
touch app/js/views/Header.jsx
編輯它…
到目前為止已完成一個簡單的 react 程式。我們可以使用 webpack 這個指令直接把我們的程式打包：
webpack
然後會產生一個 bundle.js 檔，之後要使用就直接引入即可。
但如果想要在編輯時就可以 livereload? 沒問題，使用webpack-dev-server的 hot mode 就可以了。先安裝 webpack-dev-server
npm install --save webpack-dev-server
然後修改一下我們的 webpack.config.js
在 app 那邊加一個 webpack/hot/dev-server
然後也在 index.html 加一個
最後只要在 terminal 下一個指令讓它跑起來就可以囉
webpack-dev-server --progress --colors --hot
在網址列輸入：localhost:8080
然後只要修改檔案，它就會立馬更新了哦~
延伸範例：
