webpack之webpack-dev-server的使用

本文的目的是要體驗下使用webpack服務器的熱更新和構建完成自動彈出瀏覽器的酷炫效果。

一、webpack及webpack-dev-server的安裝

全局安裝webpack，使用命令npm install webpack -g
全局安裝webpack-dev-server，使用命令npm install webpack-dev-server -g

二、項目文件目錄結構

例子的目錄結構以下：

hello.js文件的做用是導出一段文本，代碼以下：

index.js文件的做用是引用文本，並打印到頁面上。代碼以下：

最後在頁面中引用打包好的bundle.js，頁面代碼以下：

三、webpack.config.js文件配置

代碼寫完後，配置下 webpack，配置文件以下：

從配置上看入口文件是index.js，打包後會生成一個bundle.js。在經過webpack-dev-server啓動時，服務器會在3000端口監聽，並自動打開瀏覽器。

四、項目運行結果

寫好代碼和配置後，咱們運行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中能夠看到以下信息，表明熱更新啓動成功，咱們修改代碼後不用刷新頁面。

五、注意事項

注意的地方：
一、有資料說使用webpack-dev-server直接啓動，這種狀況下要使用熱更新，必須在webpack.config.js文件中引入插件HotModuleReplacementPlugin。
webpack官網上有對這個的說明，截圖以下：

二、使用webpack-dev-server服務器啓動時，打包生成的文件在內存中，而使用webpack命令打包生成的bundle.js默認是在dist目錄下，頁面引用的時候路徑不一樣。