使用初步
- 安裝webpack-dev-server：
在項目目錄下執行，npm install webpack-dev-server -g - 運行 webpack-dev-server
自動刷新
有兩種模式自動刷新頁面：
* Iframe mode （網頁是內嵌在一個iframe中的）
* Inline mode （將一個小的webpack-dev-server客戶端條目添加到包，以更新頁面）
每種模式都支持Hot Module Replacement。在Hot Module Replacement中，會通知bundle發生更改（而不是重新加載整個頁面）,Hot Module Replacement運行時可以加載更新的模塊並將它們注入正在運行的應用程序。
iframe mode
使用iframe mode不需要多餘的配置，只需要在瀏覽器中瀏覽http://«host»:«port»/webpack-dev-server/«path».
特徵：
* 不需要使用任何配置
* 信息條展示在你應用的上方
* 因爲是內嵌在iframe中，url的變化不會反應在你的瀏覽器中
inline mode
使用這種模式，你有兩種方式：
1. 在命令行中指定–inline
webpack-dev-server --inline
2. 在webpack.config.js中設置devServer: { inline: true }
這會將webpack-dev-server客戶端入口點添加到webpack配置中，url沒有發生改變，只需要瀏覽：http://«host»:«port»/«path»
使用支持“安全寫(safe write)”的編輯器
請注意：很多編輯器都支持”安全寫(safe write)”功能，而且默認是開啓的，這會導致webpack-dev-server不能夠正確地監聽文件。”safe write”意味着文件的更改不會直接寫入到原始文件，而是會先寫入到一個臨時文件中，當保存操作成功完成時，將重命名並替換原始文件。這種行爲會導致文件監聽器失去跟蹤目標，因爲原始文件已經被移除掉了。爲了防止此類事件，必須關閉你編輯器中的“safe write”特性。
* VIM - set:set backupcopy=yes (文檔)
* IntelliJ - Settings ▶︎ System Settings ▶︎ Synchronization ▶︎ disable safe write (may differ in various IntelliJ IDEs, but you can still use the search feature)
筆者用的編輯器是webstorm，和IntelliJ都是屬於jetbrains旗下的編輯器，設置和IntelliJ一樣。其他支持“safe write”的編輯器，應該在網上可以搜到設置“safe write”的方法。
在webpack配置文件中配置
在webpack.config.js中有個devServer屬性，可以對webpack-dev-server進行配置，比如端口，打開路徑等。devServer: {
contentBase: './dist',
port: 8000,
inline: false,
open: 'http://localhost:8000/#/'
}