深刻淺出webpack學習1--使用DevServer

時間 2019-11-09

標籤深刻 webpack 學習使用 devserver 简体版

原文原文鏈接

使用DevServer

在平常開發中，咱們可能須要如下幾個功能：css

1. 提供HTTP服務而不是使用本地文件預覽；
2. 監聽文件變化並自動刷新網頁， 作到實時預覽；
3. 支持Source Map， 以方便調試；

webpack的原生支持上述二、3點內容，再結合官方提供的開放工具DevServer也能夠很方便的作到第一點。DevServer會啓動一個HTTP服務器用於服務網頁請求，同時會幫助啓動webpack，並接收webpack發出的文件變動信號，經過websocket協議自動刷新網頁作到實時預覽。html

安裝DevServer：webpack

npm i -D webpack-dev-server

安裝完成後，執行webpack-dev-server命令，DevServer就啓動了。能夠在控制檯中看到：web

Project is running at http://localhost:8080/
webpack output is served from /

這意味着DevServer啓動的HTTP服務監聽在http://localhost:8080/, DevServer啓動後會一直駐留在後臺保持運行，訪問這個網址就能獲取項目根目錄下的index.html。用瀏覽器打開這個地址會發現頁面空白錯誤緣由是./dist/bundle.js加載404。同時你會發現並無文件輸出到dist目錄，由於DevServer會把webpack構建出的文件保存在內存中，在要訪問輸出的文件時，必須經過http服務訪問。因爲DevServer不會理會webpack.config.js裏配置的output.path屬性，因此要獲取bundle.js的正確URL是http://localhost:8080/bundle.js對應的index.html應該修改成：npm

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<**加粗文字**div id="app"></div>
<!--導入 DevServer 輸出的 JavaScript 文件-->
<script src="bundle.js"></script>
</body>
</html>

實時預覽

按照上面的步驟，你能夠試試修改main.js main.css main.js中的任何文件，保存後你會發現瀏覽器會自動刷新，運行出修改後的效果。瀏覽器

webpack在啓動的時能夠開啓監聽模式，開啓監聽模式後webpack會監聽本地文件系統的變化，發生變化時從新構建出新的結果。webpack默認是關閉監聽模式，你能夠在啓動webpack時經過webpack --watch來開啓監聽模式。服務器

經過DevServer啓動的webpack能夠開啓監聽模式，當發生變化時從新執行完構建後通知DevServer。DevServer會讓webpack在構建出的JavaScript代碼裏注入一個代理客戶端用於控制網頁。網頁和DevServer之間經過WebSocket協議通訊，以方便DevServer主動向客戶端發送命令。DevServer在收到來自WebPack的文件變化通知時經過注入的客戶端控制網頁刷新。websocket

若是修改index.html文件並保存，你會發現這並不會觸發以上機制，致使這個問題的是webpack在啓動時會以配置裏的entry爲入口區遞歸解析entry所依賴的文件，只有entry自己和依賴的文件纔會被webpack添加到監聽列表裏。而index.html文件是脫離了JavaScript模塊化系統，全部webpack不知道它的存在。app

模塊熱替換

除了經過從新刷新整個網頁來實現實時預覽，DevServer還有一種被稱做模塊熱替換的刷新技術。模塊熱替換能作到在不從新加載整個網頁的狀況下，經過將被更新過的模塊替換老的模塊。再從新執行一次來實現實時預覽。模塊熱替換相對於默認的刷新機制能提供更快的響應和更好的開發體驗。模塊熱替換默認是關閉的，要開啓模塊熱替換，只須要在啓動DevServer時帶上--hot參數，重啓DevServer後再去更新文件就能體驗到模塊熱替換的樂趣了。socket