轉自：http://blog.csdn.net/alanfancy/article/details/64444558

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

三．Webpack-dev-server

Webpack的載入器有兩個介面重要的介面：

webpack cli ——預設介面（和webpack一起安裝了，就是npm run build，生產版本所使用的）
Webpack-dev-server ——通過cli和配置檔案（webpack.config.js）的配置項來控制webpack的打包動作，一般為開發版本所用

1.安裝webpack-dev-server : npm install webpack-dev-server –save-dev
2.建立webpack.config.js檔案，並新增基本配置

var path = require('path'); // 匯入路徑包
module.exports={
entry:'./src/index.js',//入口檔案
output:{
path:path.join(__dirname,'dist'),// 指定打包之後的資料夾
publicPath:'/dist/',// 指定資原始檔引用的目錄
filename:'bundle.js'// 指定打包為一個檔案 bundle.js
}}

打包所需的路徑都已在webpack.config.js配置後，package.json的build則去掉路徑，並新增webpack-dev-server啟動：”dev”:”webpack-dev-server”

...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rimraf dist && webpack --watch",
"dev": "webpack-dev-server"
},
...

執行npm run dev啟動webpack-dev-server進行打包，在瀏覽器輸入localhost:8080直接開啟，沒毛病。
修改messages.json的內容，儲存，可以看到瀏覽器實時更新了資料。

在實際開發中，我們往往有以下需求：

1、每次修改程式碼後，webpack可以自動重新打包，webpack-dev-server有兩個用於自動重新整理模式：iframe和inline
2、瀏覽器可以響應程式碼變化並自動重新整理（hot）

·iframe
頁面被巢狀在一個iframe下，程式碼發生改動後，iframe會重新載入
使用此模式無需額外配置，只需訪問http://localhost:8080/webpack-dev-server/index.html即可，顯然webpack-dev-server預設的模式就是iframe。

·inline
為整個頁面提供了“Live reloading”功能。webpack官方提供的一個小型Express伺服器。

·hot
提供了“模組熱過載”功能，它會嘗試僅僅更新元件被改變的部分（而不是整個頁面）。會嘗試先去通過 HMR 更新然後可能嘗試重新整理整個頁面。只需要加上一個 webpack/hot/dev-server entry point，並且在 dev-server 呼叫時加上引數 –hot。如果我們把inline和hot這兩個選項都寫上，那麼當檔案被改動時，webpack-dev-server會先嚐試HMR，如果這不管用，它就會重新載入整個頁面。

hot（HMR）和inline使用有兩種方式：CLI和Node.js Api

1>CLI方式比較簡單，只需修改package.json中scripts配置，新增 –inline –hot

“dev”: “webpack-dev-server –inline –hot”

2>Node.js Api方式

1.在主目錄下，新建dev-server.js檔案

var WebpackDevServer=require('webpack-dev-server');
var webpack=require('webpack');
var config=require('./webpack.config');
var path=require('path');
var compiler=webpack(config);
var server=new WebpackDevServer(compiler,{//建立伺服器例項
hot:true,//HMR配置
filename:config.output.filename,
publicPath:config.output.publicPath,//必填
stats:{
colors:true
}
});
server.listen(8080,'localhost',function(){});

2.修改webpack.config.js配置

var path=require('path');// 匯入路徑包
var webpack=require('webpack');
module.exports={
entry:[//入口檔案
'./src/index.js',
'webpack/hot/dev-server',//呼叫熱過載 hot
'webpack-dev-server/client?http://localhost:8080'//新增webpack-dev-server客戶端
],
plugins:[
new webpack.HotModuleReplacementPlugin()//全域性開啟熱程式碼替換
],
output:{
path:path.join(__dirname,'dist'),// 指定打包之後的資料夾
publicPath:'/dist/',// 指定資原始檔引用的目錄
filename:'bundle.js'// 指定打包為一個檔案 bundle.js
}
}

3.在index.js最底下新增hot呼叫

if(module.hot){//啟用熱過載 module.hot.accept();}

4.修改package.json啟動方式

...
"scripts": {
"build": "rimraf dist && webpack --watch",
"dev": "node dev-server.js"
},
...

5.執行npm run dev ，在瀏覽器輸入localhost:8080檢視，然後嘗試修改index.js或messages.json的資料，儲存，再看瀏覽器，是不是自動重新整理了？