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

不須要你知道任何東西，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»便可。

其中[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，你會發現本地開發體驗有了極大的提高。強烈建議試試。