webpack-dev-server 多入口自動刷新，支持對象

萬物的來源~webpack 自己 watch

webpack watch 傳送門
webpack 能夠監聽文件變化，當它們修改後會從新編譯
watch boolean
啓用 Watch 模式。這意味着在初始構建以後，webpack 將繼續監放任何已解析文件的更改。

module.exports = {
  //...
  watch: false
};

須要注意的即是webpack-dev-server 和 webpack-dev-middleware 裏 Watch 模式默認開啓。

其餘API不作過多介紹，傳送門裏有天下

主人公 webpack-dev-server

webpack-dev-server默認開啓以上的監視功能。但二者監視效果存在差別：
webpack-dev-server自帶的監視自動打包功能，新打包的文件存在於內存中。新文件的內存路徑與配置文件中的publicPath相關，如http://localhost:8080/{publicPath}/bundle.js

假如在配置文件中配置了publicPath（沒有配置的話默認是是 /）：

output: {
        path: __dirname + "/dist",
        filename: "bundle.js",
        publicPath: "/p/"
    },

則webpack-dev-server 的監視功能只會更新內存中的文件，如 以上就是http://localhost:8080/p/bundle.js（該頁面不會自動刷新）。但這個 http://localhost:8080/webpack-dev-server/p/bundle.js 這個路徑下的文件也會更新，並且會自動刷新。

到這裏能夠理解爲：

• 打包後文件的內存路徑 = devServer.contentBase + output.publicPath + output.filename，只能經過瀏覽器來訪問這個路由來訪問內存中的bundle
• 使用webpack打包更新的文件硬盤路徑 = output.path + output.filename
• 在路由前加上/webpack-dev-server/，只要源文件發生變化，這個地址下的頁面都會自動刷新。以上面的/webpack-dev-server/p/bundle.js爲例，自動刷新後頁面的內容爲/p/bundle.js。（這裏實際就是後面會說到的iframe模式）

對於publicPath，有兩個用處：

• 像以上的被webpack-dev-server做爲在內存中的輸出目錄。
• 被其餘的loader插件所讀取，修改url地址等。

自動刷新 iframe模式

使用這個模式不須要任何的配置，但須要改變頁面的訪問路徑，好比要訪問根目錄下的首頁，源連接是 http://localhost:8080/index.html 須要換成http://localhost:8080/webpack-dev-server/index.html 。訪問這個鏈接時，查看頁面的dom結構，發現頁面是嵌入到一個iframe中顯示的：

修改相關聯模塊文件時，這個頁面會自動刷新。

自動刷新 inline模式

這個模式中有兩種使用方式，分別是node和html方式。inline模式下訪問頁面不須要像iframe模式那樣須要改變訪問的路徑，inline模式下只須要訪問源路徑便可

• html方式：在須要自動刷新的頁面中添加以下腳本便可，不須要像文檔所說那樣須要添加 --inline參數 或者 配置添加 devServer: { inline: true }

<script src="http://localhost:8080/webpack-dev-server.js"></script>

理解就是當webpack-dev-server自帶的watch檢測到變化時，會經過以上的這個js來使瀏覽器自動刷新

• node方式：對於這裏的理解實際就是，不直接運行webpack-dev-server指令了，而是經過node來啓動webpack-dev-server。node代碼以下：

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

光光運行這段代碼是沒辦法使瀏覽器自動刷新的，由於這效果僅僅是運行了webpack-dev-server而已，還須要配合以上說的html方式來使瀏覽器自動刷新。

針對多入口，webpack-dev-server實現刷新

有如下幾種方式

多入口，entry爲數組

添加如下

entry: [
      'webpack/hot/dev-server',
      'webpack-dev-server/client?http://localhost:8080',
      path.resolve(__dirname, './src/entry.js')
    ]

能夠手動給entry數組插入監聽刷新服務

多入口，entry爲對象key-value

1. 是手動給HTML添加 webpack-dev-server/client?http://localhost:8080' 的 script 外鏈

2.若是webpack構造中有使用html-webpack-plugin插件的話，可使用html-webpack-plugin-webpack-dev-server這個插件github地址

參考