摘要：在項目根目錄下創建，通過這個文件來起服務。到這里為止，自動刷新的內容基本講完了。注意到一點，目前自動刷新都是刷新整個頁面。其中表示熱加載模塊，表示。后續我還會進行更深入的學習，希望和大家共同進步。

本文主要介紹以下兩方面的內容：

webpack-dev-server自動刷新

熱加載（Hot Module Replacement）

webpack-dev-server提供了兩種自動刷新的模式

iframe模式

inline模式

這兩種模式都支持Hot Module Replacement（熱加載），所謂熱加載是指當文件發生變化后，內存中的bundle文件會收到通知，同時更新頁面中變化的部分，而非重新加載整個頁面。

我們先介紹自動刷新，再來談熱加載。

前兩篇文章中提到，我們在控制臺輸入

$ webpack-dev-server

就啟動了服務，并且支持自動刷新，其實，這種方式就是iframe模式。查看頁面元素可以發現：

如圖中黑框所示，可以看到其實是通過iframe內使我們實際的頁面。
這種方式有一點需要注意：瀏覽器地址欄的url地址不會受頁面跳轉的影響，將一直保持為http://localhost:8080/webpack-dev-server。
比如，現在給index.html頁面加上一個跳轉鏈接，跳轉到foo.html。
foo.html

    
        
        
    
    
        
this is another page
    

index.html中加入跳轉鏈接如下：

    

        
webpack demo
    
    click here to go to foo.html

當點擊鏈接跳轉到foo.html頁面時，可以看到瀏覽器的地址欄中仍然是http://localhost:8080/webpack-dev-server。如下：

這里要說一下，目前我們啟動webpack-dev-server都是通過命令行實現的。實際上，還可以通過nodeAPI WebpackDevServer實現。
先看命令行如何實現inline模式，有兩種方法：
1、啟動時配置

$ webpack-dev-server --inline

2、配置文件配置，在webpack.config.js中加入

devServer: { inline: true }

這樣我們就可以通過http://localhost:8080/來訪問我們的文件了。比如這樣http://localhost:8080/index.html來訪問index.html，且頁面跳轉回反映在瀏覽器的地址欄中。

接下來說明如何使用WebpackDevServer來實現inline模式。
在項目根目錄下創建server.js，通過這個文件來起服務。
server.js

var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");

var config = require("./webpack.config.js");
config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
    publicPath: "/dist/"
});
server.listen(8080);

有幾個問題需要說明：
1、這里加載了webpack和webpack-dev-server兩個模塊，這個require默認會從node-modules中去加載。由于我們之前安裝時為了方便在命令行下使用，采用了全局安裝的方式-g，所以本地并沒有安裝這個模塊。這里需要在當前項目中再進行安裝

$ npm install webpack webpack-dev-server

2、在配置文件webpack.config.js中無需再對devServer進行配置，因為我們這樣啟動服務的話，WebpackDevServer是訪問不到webpack中的配置的。但是，我們需要對配置文件的entry進行修改：

entry: ["./src/entry.js"]

以數組方式來寫，這樣就可以支持多個入口文件。同時在server.js中加入

config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");

3、WebpackDevServer支持兩個參數，其中第二個參數對WebpackDevServer進行了配置，剛剛提到，WebpackDevServer是訪問不到webpack中的配置的，所以這里我們要再設置publicPath。
當然，為了方便處理，一般我們可以統一將WebpackDevServer的配置在webpack.config.js中的devServer中設置，再將devServer作為第二個參數傳給WebpackDevServer。如下：
webpack.config.js

module.exports = {
    devServer: {  //這里配置webpack-dev-server
        publicPath: "/dist/"
        //這里還可以加入其它你需要的參數
    },
    entry: ["./src/entry.js"],
    output: {
        path: path.join( __dirname, "/dist"),
        publicPath: "/dist/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            //....
        ]
    }
};

server.js

var config = require("./webpack.config.js");
config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, config.devServer);  //這里將其作為參數傳進來

最后運行server.js就可以啟動服務了。

$ node server.js

到這里為止，自動刷新的內容基本講完了。注意到一點，目前自動刷新都是刷新整個頁面。下面來說下熱加載，也就是只有變化的內容更新，而非刷新整個頁面。

方法一：直接通過命令行設置

$ webpack-dev-server --hot

打開頁面可以在控制臺看到以上內容，說明熱加載配置成功。其中HMS表示熱加載模塊，WDS表示webpack-dev-server。

方法二：通過nodejs的api配置
這個方法需要對webpack.config.js做出一些配置。
第一步：在webpack配置文件入口參數中加入webpack/hot/dev-server

在server.js中作如下修改即可：

config.entry.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server");  //這里在入口參數中又添加了一項，為熱加載的dev-server

第二步：添加plugin，添加熱加載模塊

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

第三步：在devServer中配置hot為true

devServer: {
    publicPath: "/dist/",
    hot: true  //這里配置了熱加載模式為true
    //這里還可以加入其它你需要的參數
}

最終，webpack.config.js如下：

let path = require("path");
let webpack = require("webpack");

module.exports = {
    devServer: {
        publicPath: "/dist/",
        hot: true
        //這里還可以加入其它你需要的參數
    },
    entry: ["./src/entry.js"],
    output: {
        path: path.join( __dirname, "/dist"),
        publicPath: "/dist/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /.css$/, 
                loader: "style!css"
            },
            {
                test: /.less$/,
                loader: "style!css!less"
            },
            {
                test: /.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

server.js如下：

var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");

var config = require("./webpack.config.js");
config.entry.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, config.devServer);
server.listen(8080);

啟動服務：

$ node server.js

可以看到配置成功，如下圖所示：

至此，本文對webpack-dev-server的自動刷新和熱加載做了詳細介紹，當然，它的原理還有待更深一步的探索。后續我還會進行更深入的學習，希望和大家共同進步。

http://webpack.github.io/docs...

（本文完）