webpack-dev-server，模組化開發神器

齊修_qixiuss發表於2016-11-15
WebdevServer

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

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構建輸出的臨時檔案存放到記憶體中，而且是以publicPath作為相對路徑。
        // publicPath並不會影響輸出目錄
        // 此外，如果指定路徑下已經存在了相同檔案，webpack會優先使用記憶體的臨時檔案
        publicPath: "/assets/",
        // 可以對構建輸出的app.js進行二次定製化命名，比如加時間戳等
        filename: "[name].js"
    }
};複製程式碼

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

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

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

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

自動重新整理

顧名思義，就是監聽到改動是自動重新整理頁面，webpack-dev-server支援兩種模式的自動重新整理。

iframe模式

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

inline模式

簡單配置可以開啟，然後直接訪問http://[host]:[port]/[path]即可，inline模式的特徵如下：
✦ 需要額外的配置
✦ 編譯資訊只能在命令列和瀏覽器console中檢視
✦ 瀏覽器的地址和頁面URL同步

前文提到的簡單配置到底有多簡單呢？如下兩種方式均可：
➙ 在命令列中指定--inline引數，比如：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引數
值得注意的時候，這種開啟方式只適合inline模式，也就是說，你必須同時結合inline模式使用：webpack-dev-server --inline --hot。
然後直接訪問http://«host»:«port»/«path»即可。

webpack-dev-server，模組化開發神器
其中[HMR]就是熱替換的輸出資訊

其中[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. 開啟熱替換模式
    // 注意：這個引數不是webpack的引數，是webpack-dev-server的引數
    hot: true
});
server.listen(8080);複製程式碼

除了上面註釋中的兩個工作之外，還需要在webpack.config.js檔案中新增一小行程式碼：new webpack.HotModuleReplacementPlugin()。

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

代理

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

那麼，怎麼和後臺應用整合在一起呢？

怎麼和後臺應用整合？

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

為了整合webpack-dev-server和後臺應用，我們需要實現以下功能：
✦ 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引數指向後臺應用。

具體到專案中，按以下步驟就好了：
➙ 假如webpack-dev-server埠為8080，後臺應用的埠為9090。
➙ 修改webpack的output.publicPath配置為：http://localhost:8080/assets/
➙ 修改HTML的script標籤指向：http://localhost:8080/assets/bundle.js
➙ 建立webpack-dev-server和runtime之間的聯絡，inline模式或者iframe模式

總結點什麼？

webpack-dev-server是一個模組化開發的解決方案，他封裝了webpack，並作為一個簡易的Node.js伺服器供靜態開發使用。雖然起步稍微複雜一些，但是環境搭好之後，無論對於新手還是老手，開發體驗提升很大，對於工程化開發有很大的幫助。

➙ webpack-dev-server就是一個基於Node.js和webpack的一個簡易伺服器，它在伺服器端進行構建打包。
➙ webpack-dev-server程式碼中注入了一份runtime，來建立webpack-dev-server和客戶端的聯絡。
➙ webpack-dev-server和客戶端建立聯絡之後，可以做很多厲害的事情，比如自動重新整理、熱替換等。
➙ webpack-dev-server還提供了代理功能，代理有很多應用場景，舉幾個簡單的例子：本地資料介面模擬、遠端介面除錯、分拆介面到不同的遠端伺服器等。
➙ 實際專案中，我們可以使用代理來整合前端專案和後臺專案，也可以使用兩個專案並行的方式來整合，也就是直接建立前端專案和後段專案的聯絡。這個方案對於多頁應用更具有通用性。
➙ webpack-dev-server還有一些自己的配置項。

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

相關文章