不需要你知道任何東西，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]就是熱替換的輸出信息。
? 結合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，你會發現本地開發體驗有了極大的提升。強烈建議試試。
