本文的目的是要體驗下使用webpack服務器的熱更新和構建完成自動彈出瀏覽器的酷炫效果。
1、webpack及webpack-dev-server的安裝
全局安裝webpack，使用命令npm install webpack -g
全局安裝webpack-dev-server，使用命令npm install webpack-dev-server -g
2、項目文件目錄結構
例子的目錄結構如下：
hello.js文件的作用是導出一段文本，代碼如下：
index.js文件的作用是引用文本，並打印到頁面上。代碼如下：
最后在頁面中引用打包好的bundle.js，頁面代碼如下：
3、webpack.config.js文件配置
代碼寫完后，配置下 webpack，配置文件如下：
從配置上看入口文件是index.js，打包后會生成一個bundle.js。在通過webpack-dev-server啟動時，服務器會在3000端口監聽，並自動打開瀏覽器。
4、項目運行結果
寫好代碼和配置后，我們運行webpack-dev-server --hot命令，結果杯具了。保錯：Cannot find module 'webpack'
百度一番，發現是環境變量的配置問題。新建一個系統環境變量NODE_PATH，值為:C:\Users\Administrator\AppData\Roaming\npm\node_modules
可以檢查一下環境變量的值是否正確，具體是在電腦的地址欄中輸入地址C:\Users\Administrator\AppData\Roaming\npm\node_modules
敲回車后，進入目錄：
在這個目錄下我們看到了全局安裝的webpack和webpack-dev-server，這證明我們的路徑配置無誤。
運行命令webpack-dev-server --hot
瀏覽器console中可以看到如下信息，代表熱更新啟動成功，我們修改代碼后不用刷新頁面。
5、注意事項
注意的地方：
1、有資料說使用webpack-dev-server直接啟動，這種情況下要使用熱更新，必須在webpack.config.js文件中引入插件HotModuleReplacementPlugin。
webpack官網上有對這個的說明，截圖如下：
2、使用webpack-dev-server服務器啟動時，打包生成的文件在內存中，而使用webpack命令打包生成的bundle.js默認是在dist目錄下，頁面引用的時候路徑不同。