不需要你知道任何東西，webpack-dev-server非常適合你作為新手腳手架，讓你體驗一把工程化開發(fā)、模塊化開發(fā)的便利。

webpack-dev-server 是個什么東西？

webpack-dev-server就是一個基于Node.js和webpack的一個簡易服務器。它在服務器端使用webpack-dev-middleware進行webpack構建打包；并在客戶端注入一份runtime，用于接受服務器端的構建打包后信息。

只需要提供一份簡單的webpack配置文件，在命令行中運行wbepack-dev-server即可運行起來。

var path = require("path");

module.exports = {
    entry: {
        // 以./app/main.js作為入口文件，構建輸出app.js
        app: ["./app/main.js"]
    },
    output: {
        // 將構建打包輸出的app.js放到build目錄下
        path: path.resolve(__dirname, "build"),
        // webpack構建輸出的臨時文件存放到內(nèi)存中，而且是以publicPath作為相對路徑。
        // publicPath并不會影響輸出目錄
        // 此外，如果指定路徑下已經(jīng)存在了相同文件，webpack會優(yōu)先使用內(nèi)存的臨時文件
        publicPath: "/assets/",
        // 可以對構建輸出的app.js進行二次定制化命名，比如加時間戳等
        filename: "[name].js"
    }
};

上面這份配置告訴webpack如何進行模塊化管理，如何打包輸出，我們就可以通過localhost:[port]/assets/bundle.js訪問到構建后的打包文件。

也就是說，webpack-dev-server底層一方面使用webpack在服務器端進行構建打包，一方面在客戶端注入runtime以便和服務器端建立聯(lián)系。顯然，我們提供的webpack.config.js文件是提供給webpack的，也就是說想要做更多的構建任務，對webpack配置文件進行修改即可。

那么，webpack-dev-server還提供了什么牛逼的功能呢？

webpack-dev-server 還有哪些牛逼的功能？

自動刷新

顧名思義，就是監(jiān)聽到改動是自動刷新頁面，webpack-dev-server支持兩種模式的自動刷新。

iframe模式

使用iframe模式并不需要多余的配置，直接訪問http://[host]:[port]/webpack-dev-server/[path]即可，iframe模式的特征如下：
? 無需額外的配置
? 頂部條可以顯示編譯信息
? 瀏覽器的地址不會跟著頁面URL變動

inline模式

簡單配置可以開啟，然后直接訪問http://[host]:[port]/[path]即可，inline模式的特征如下：
? 需要額外的配置
? 編譯信息只能在命令行和瀏覽器console中查看
? 瀏覽器的地址和頁面URL同步

前文提到的簡單配置到底有多簡單呢？如下兩種方式均可：
? 在命令行中指定--inline參數(shù)，比如：webpack-dev-server --inline
? 在webpack.config.js配置文件中添加devServer: {inline: true}

除了這兩種簡單的配置外，還有一種稍微“復雜”的配置，那就是結合Node.js使用，顯然，結合Node.js更具有通用型，雖然復雜，我也得介紹一下。

var config = require("./webpack.config.js");
// 就是這么“復雜”！
// 往webpack的入口配置中加入 webpack-dev-server/client?http://localhost:8080/ 即可
config.entry.app.unshift(
  "webpack-dev-server/client?http://localhost:8080/"
);

var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {

});
server.listen(8080);

其實自動刷新并沒有很牛逼，好多其他工具也可以做到，而且有時候頻繁自動刷新也不是我們想要的。

熱替換

熱替換是比自動刷新更牛逼的功能，也是為啥我稀罕webpack-dev-server的原因，有了它，某些場景下，可以在不刷新頁面的情況下讓代碼生效，是不是很神奇？配合React簡直碉堡了！

那么怎么開啟熱替換功能？熱替換又適合什么場景呢？

開啟熱替換功能

結合不同的使用場景，主要有兩種方式可以開啟熱替換功能。

? 在命令行中指定--hot參數(shù)
值得注意的時候，這種開啟方式只適合inline模式，也就是說，你必須同時結合inline模式使用：webpack-dev-server --inline --hot。
然后直接訪問http://?host?:?port?/?path?即可。

Paste_Image.png

其中[HMR]就是熱替換的輸出信息。

? 結合Node.js使用
這個就稍微復雜一下，結合代碼看：

var config = require("./webpack.config.js");
// 1. 給app入口添加webpack/hot/dev-server
// 注意：前面那一串是什么鬼？那是Node.js開啟inline模式的方式
config.entry.app.unshift(
  "webpack-dev-server/client?http://localhost:8080/", 
  "webpack/hot/dev-server"
);

var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
    // 2. 開啟熱替換模式
    // 注意：這個參數(shù)不是webpack的參數(shù)，是webpack-dev-server的參數(shù)
    hot: true
});
server.listen(8080);

除了上面注釋中的兩個工作之外，還需要在webpack.config.js文件中添加一小行代碼：new webpack.HotModuleReplacementPlugin()。

無論以上哪種方式，本質上都是將一個特殊的webpack/hot/dev-serer入口添加到webpack的配置中，其實也就是往客戶端的js文件注入了一些代碼。

代理

這個話題就不展開了，大概就是為了解決跨域問題、模擬數(shù)據(jù)、對第三方請求的攔截轉發(fā)等。功能很強大，但是實際項目中，我更推薦和第三方應用整合在一起，如果單純的前端開發(fā)或者前端demo可以嘗試代理。

那么，怎么和后臺應用整合在一起呢？

怎么和后臺應用整合？

實際項目中，尤其是多頁應用，都會用后臺的語法去“套頁面”，而這個套出來的頁面，嚴重依賴后臺的運行環(huán)境，前端環(huán)境是沒辦法單獨運行的。
所以，我們常用的方案就是將前端應用和后臺應用隔離開，前端應用構建輸出到后臺應用，也就是我們需要將webpack-dev-server整合到后臺應用中去。

為了整合webpack-dev-server和后臺應用，我們需要實現(xiàn)以下功能：
? webpack生成的JS/CSS等資源需要指向webpack-dev-server。配置一個完整的output.publicPath鏈接即可。
? 后臺應用生成的HTML頁面中的script需要指向webpack-dev-server。修改HTML的script即可。
? 我們需要建立webpack-dev-server和runtime的連接，以便自動刷新等。inline模式會自動建立webpack-dev-server和runtime的連接，并不需要額外的配置。iframe模式稍微復雜一丟丟，需要配置--content-base參數(shù)指向后臺應用。

具體到項目中，按以下步驟就好了：
? 假如webpack-dev-server端口為8080，后臺應用的端口為9090。
? 修改webpack的output.publicPath配置為：http://localhost:8080/assets/
? 修改HTML的script標簽指向：http://localhost:8080/assets/bundle.js
? 建立webpack-dev-server和runtime之間的聯(lián)系，inline模式或者iframe模式

總結點什么？

webpack-dev-server是一個模塊化開發(fā)的解決方案，他封裝了webpack，并作為一個簡易的Node.js服務器供靜態(tài)開發(fā)使用。雖然起步稍微復雜一些，但是環(huán)境搭好之后，無論對于新手還是老手，開發(fā)體驗提升很大，對于工程化開發(fā)有很大的幫助。

? webpack-dev-server就是一個基于Node.js和webpack的一個簡易服務器，它在服務器端進行構建打包。
? webpack-dev-server代碼中注入了一份runtime，來建立webpack-dev-server和客戶端的聯(lián)系。
? webpack-dev-server和客戶端建立聯(lián)系之后，可以做很多厲害的事情，比如自動刷新、熱替換等。
? webpack-dev-server還提供了代理功能，代理有很多應用場景，舉幾個簡單的例子：本地數(shù)據(jù)接口模擬、遠端接口調(diào)試、分拆接口到不同的遠端服務器等。
? 實際項目中，我們可以使用代理來整合前端項目和后臺項目，也可以使用兩個項目并行的方式來整合，也就是直接建立前端項目和后段項目的聯(lián)系。這個方案對于多頁應用更具有通用性。
? webpack-dev-server還有一些自己的配置項。

一旦用上webpack-dev-server，你會發(fā)現(xiàn)本地開發(fā)體驗有了極大的提升。強烈建議試試。