webpack入門指南-step04
一、建立項目
建一個文件夾，然後新建一個package.json的文件在項目根目錄下
如果你使用git管理你的這個項目的話，建議你新建一個.gitignore文件，不要讓git提交一些node依賴的模塊， 你也可以參考github的例子 https://github.com/github/gitignore/blob/master/Node.gitignore
我們這裏就簡單一點
二、項目結構
現在項目裏面就有一個package.json， 我們多加一點東西，慢慢豐富它的內容。
- /app
- index.js
- sub.js
- package.json
- webpack.config.js
添加了兩個js文件，添加了最重要的webpack的配置文件，我們還是從非常簡單的hello world開始玩起，webpack原生直接支持AMD和CommonJS兩種格式，如果你想使用ES6的風格，這點以後再提。
JS代碼
sub.js
index.js
代碼寫完了，完成一個很簡單的功能，新建一個單獨的module，並且在另外一個module裏面引用他，最後會在頁面裏面輸出兩個標題。
三、配置Webpack
現在開始配置webpack，目標是把這兩個js文件合並成一個文件. 我們可以自己在build文件夾裏面手動建一個index.html文件夾，然後再把合並以後的js引用在裏面，但是這樣有些麻煩，所以我們這裏安裝一個plugin，可以自動快速的幫我們生成HTML。
npm install html-webpack-plugin --save-dev
好 有了這個插件 開始寫config文件
然後在項目根目錄運行
webpack
終端顯示一堆信息，然後告訴你成功了。
你可以使用webpack --help看看一些運行的時候可選的參數
你會發現多出來一個build文件夾，直接點開裏面的html文件，你會發現我們可愛的“hello world”已經插入到頁面了。我們的任務完成了，成功生成html，合並js，html引入了js，js被執行了。
四、配置webpack-dev-server
上面任務雖然完成了，但是我們要不斷運行程序然後查看頁面，所以最好新建一個開發服務器，可以serve我們pack以後的代碼，並且當代碼更新的時候自動刷新瀏覽器。
安裝webpack-dev-server
更新, 這裏還是全局安裝比較好
npm install webpack-dev-server －g
安裝完畢後 在config中添加配置
然後再package.json裏面配置一下運行的命令,npm支持自定義一些命令
好了，萬事具備了，在項目根目錄下輸入npm start,一堆花花綠綠的信息後server已經起來了，在瀏覽器裏面輸入http://localhost:8080 發現偉大的hello world出現了，在js裏面隨便修改一些輸出然後保存, boom!瀏覽器自動刷新，新的結果出現了。
拓展閱讀 如果你的服務器端使用的是express框架，你還可以直接安裝express的middleware，webpack配合express，很好用。
npm install webpack-dev-middleware --save-dev
更多的詳情 請參考這篇文章
https://blog.risingstack.com/using-react-with-webpack-tutorial/
webpack入門指南-step04