摘要：在項(xiàng)目根目錄下創(chuàng)建，通過(guò)這個(gè)文件來(lái)起服務(wù)。到這里為止，自動(dòng)刷新的內(nèi)容基本講完了。注意到一點(diǎn)，目前自動(dòng)刷新都是刷新整個(gè)頁(yè)面。其中表示熱加載模塊，表示。后續(xù)我還會(huì)進(jìn)行更深入的學(xué)習(xí)，希望和大家共同進(jìn)步。

本文主要介紹以下兩方面的內(nèi)容：

webpack-dev-server自動(dòng)刷新

熱加載（Hot Module Replacement）

webpack-dev-server提供了兩種自動(dòng)刷新的模式

iframe模式

inline模式

這兩種模式都支持Hot Module Replacement（熱加載），所謂熱加載是指當(dāng)文件發(fā)生變化后，內(nèi)存中的bundle文件會(huì)收到通知，同時(shí)更新頁(yè)面中變化的部分，而非重新加載整個(gè)頁(yè)面。

我們先介紹自動(dòng)刷新，再來(lái)談熱加載。

前兩篇文章中提到，我們?cè)诳刂婆_(tái)輸入

$ webpack-dev-server

就啟動(dòng)了服務(wù)，并且支持自動(dòng)刷新，其實(shí)，這種方式就是iframe模式。查看頁(yè)面元素可以發(fā)現(xiàn)：

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

    
        
        
    
    
        
this is another page
    

index.html中加入跳轉(zhuǎn)鏈接如下：

    

        
webpack demo
    
    click here to go to foo.html

當(dāng)點(diǎn)擊鏈接跳轉(zhuǎn)到foo.html頁(yè)面時(shí)，可以看到瀏覽器的地址欄中仍然是http://localhost:8080/webpack-dev-server。如下：

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

$ webpack-dev-server --inline

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

devServer: { inline: true }

這樣我們就可以通過(guò)http://localhost:8080/來(lái)訪問(wèn)我們的文件了。比如這樣http://localhost:8080/index.html來(lái)訪問(wèn)index.html，且頁(yè)面跳轉(zhuǎn)回反映在瀏覽器的地址欄中。

接下來(lái)說(shuō)明如何使用WebpackDevServer來(lái)實(shí)現(xiàn)inline模式。
在項(xiàng)目根目錄下創(chuàng)建server.js，通過(guò)這個(gè)文件來(lái)起服務(wù)。
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);

有幾個(gè)問(wèn)題需要說(shuō)明：
1、這里加載了webpack和webpack-dev-server兩個(gè)模塊，這個(gè)require默認(rèn)會(huì)從node-modules中去加載。由于我們之前安裝時(shí)為了方便在命令行下使用，采用了全局安裝的方式-g，所以本地并沒(méi)有安裝這個(gè)模塊。這里需要在當(dāng)前項(xiàng)目中再進(jìn)行安裝

$ npm install webpack webpack-dev-server

2、在配置文件webpack.config.js中無(wú)需再對(duì)devServer進(jìn)行配置，因?yàn)槲覀冞@樣啟動(dòng)服務(wù)的話，WebpackDevServer是訪問(wèn)不到webpack中的配置的。但是，我們需要對(duì)配置文件的entry進(jìn)行修改：

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

以數(shù)組方式來(lái)寫，這樣就可以支持多個(gè)入口文件。同時(shí)在server.js中加入

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

3、WebpackDevServer支持兩個(gè)參數(shù)，其中第二個(gè)參數(shù)對(duì)WebpackDevServer進(jìn)行了配置，剛剛提到，WebpackDevServer是訪問(wèn)不到webpack中的配置的，所以這里我們要再設(shè)置publicPath。
當(dāng)然，為了方便處理，一般我們可以統(tǒng)一將WebpackDevServer的配置在webpack.config.js中的devServer中設(shè)置，再將devServer作為第二個(gè)參數(shù)傳給WebpackDevServer。如下：
webpack.config.js

module.exports = {
    devServer: {  //這里配置webpack-dev-server
        publicPath: "/dist/"
        //這里還可以加入其它你需要的參數(shù)
    },
    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);  //這里將其作為參數(shù)傳進(jìn)來(lái)

最后運(yùn)行server.js就可以啟動(dòng)服務(wù)了。

$ node server.js

到這里為止，自動(dòng)刷新的內(nèi)容基本講完了。注意到一點(diǎn)，目前自動(dòng)刷新都是刷新整個(gè)頁(yè)面。下面來(lái)說(shuō)下熱加載，也就是只有變化的內(nèi)容更新，而非刷新整個(gè)頁(yè)面。

方法一：直接通過(guò)命令行設(shè)置

$ webpack-dev-server --hot

打開頁(yè)面可以在控制臺(tái)看到以上內(nèi)容，說(shuō)明熱加載配置成功。其中HMS表示熱加載模塊，WDS表示webpack-dev-server。

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

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

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

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

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

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

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

最終，webpack.config.js如下：

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

module.exports = {
    devServer: {
        publicPath: "/dist/",
        hot: true
        //這里還可以加入其它你需要的參數(shù)
    },
    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);

啟動(dòng)服務(wù)：

$ node server.js

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

至此，本文對(duì)webpack-dev-server的自動(dòng)刷新和熱加載做了詳細(xì)介紹，當(dāng)然，它的原理還有待更深一步的探索。后續(xù)我還會(huì)進(jìn)行更深入的學(xué)習(xí)，希望和大家共同進(jìn)步。

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

（本文完）