Webpack的核心哲學思想
1.一切都是模組——就像JS檔案可以視作“模組”一樣，其他所有的一切（CSS，圖片，HTML）都可以被視作模組，通過require載入。。
2.模組載入器會把所有的模組最終打包生成一個巨大的“bundle.js”檔案，並且會一直不停進行載入！所以Webpack通過大量的特性去分割你的程式碼，生成多個“bundle”片段，並且非同步地載入專案的不同部分。

二．資料更新

1.建立src和dist兩個資料夾，把index.js移動到src資料夾裡，bundle.js是webpack打包生成出來的，使用先刪除再生成的辦法確保檔案正常更新，以後會把dist作為生成檔案存放的目標資料夾。
2.安裝rimraf 用於打包前刪除舊的生成檔案：npm install rimraf –save-dev
3.修改package.json的script啟動方式：

{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"rimraf dist && webpack src/index.js dist/bundle.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"rimraf": "^2.6.1",
"webpack": "^2.2.1"
}
}

這裡需要注意的是，當前目錄路徑需要加./，如：./src/index.js，這個坑曾經埋了我大半天。

4.執行 npm run build 打包一下，在dist目錄下得到了bundle.js

5.把index.html裡面引用bundle.js的路徑改成./dist/bundle.js，再執行http-server測試，沒毛病。
6.接下來在src目錄下新建messages.js檔案。

module.exports={ hi:'您好呀', event:'志玲姐姐'};

7.在index.js檔案引入messages.js，並例項到頁面

var messages=require('./messages');
app.innerHTML='<p>'+messages.hi+','+messages.event+"</p>";

8.把package.json修改一下，build的結尾加上監視命令–watch

"build":"rimraf dist && webpack src/index.js dist/bundle.js --watch"

9.執行npm run build重新打包，可以看到打包過程並沒有結束跳出，仍然是待命狀態。

10.另起一個cli，啟動http-server -p 3000，在瀏覽器輸入localhost:3000

修改messages.json訊息內容，然後重新整理瀏覽器，可以看到內容隨即更新了。

<本節完>