webpack學習之路（二）webpack-dev-server實現熱更新

上一章對webpack的配置有了簡單的認識。

這一章，我須要學習的是webpack熱更新，由於在開發過程當中，不但願當文件更改時，人肉去編譯文件，刷新瀏覽器。

webpack熱更新

webpack-dev-server 自動刷新

webpack-dev-server 爲你提供了一個簡單的 web 服務器，而且可以實時從新加載(live reloading)。

實際操做一下。

咱們先建立一個項目

mkdir dev-erver && cd dev-server
npm init -y // 快速建立一個項目配置
npm i webpack webpack-dev-server webpack-cli --save-dev
mkdir src // 建立資源目錄
mkdir dist // 輸出目錄
touch webpack.dev.js // 由於是在開發環境須要熱更新，因此直接建立dev配置文件
複製代碼

先編寫一下配置文件，咱們就簡單地編寫多入口配置

'use strict';

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  mode: 'development',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist')
  }
};
複製代碼

而後咱們去src建立文件，編寫內容

index.js

'use strict'

document.write('hello world~')
複製代碼

準備就緒，咱們就能夠啓動webpack-dev-server，在package.json裏添加一條命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+   "dev": "webpack-dev-server --config webpack.dev.js --open"
  },
複製代碼

運行一下

npm run dev
複製代碼

咱們看到文件已經打包完成了，可是在 dist目錄裏並無看到文件，這是由於 WDS是把編譯好的文件放在緩存中，沒有磁盤上的IO，可是咱們是能夠訪問到的

http://localhost:8080
複製代碼

配置告知 webpack-dev-server，在 localhost:8080下創建服務，將 dist 目錄下的文件，做爲可訪問文件，因此咱們能夠直接輸入bundle.js的地址查看

http://localhost:8080/index.js
複製代碼

顯然咱們想看效果而不是打包後的代碼，因此咱們在 dist目錄裏建立一個 html文件引入便可

index.html

<script src="./index.js"></script>
複製代碼

這個時候咱們訪問

http://localhost:8080
複製代碼

內容出來了，咱們接下來修改index.js文件，來看下是否能夠自動刷新

'use strict'

document.write('hello world~byebye world')
複製代碼

web 服務器就會自動從新加載編譯後的代碼

這確實是熱更新，可是這種是每一次修改會從新刷新整個頁面，你們能夠打開控制檯查看。

顯然這仍是不知足不咱們的需求。

webpack-dev-server搭配HotModuleReplacementPlugin 實現熱更新

咱們須要的是，更新修改的模塊，可是不要刷新頁面。這個時候就須要用到模塊熱替換。

模塊熱替換(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它容許在運行時更新各類模塊，而無需進行徹底刷新。

特性：

模塊熱替換(HMR - Hot Module Replacement)功能會在應用程序運行過程當中替換、添加或刪除模塊，而無需從新加載整個頁面。主要是經過如下幾種方式，來顯著加快開發速度：

• 保留在徹底從新加載頁面時丟失的應用程序狀態。
• 只更新變動內容，以節省寶貴的開發時間。
• 調整樣式更加快速 - 幾乎至關於在瀏覽器調試器中更改樣式。

啓用

啓用HMR，其實十分簡單，修改下webpack-dev-server的配置，和使用webpack內置的HMR插件便可。

'use strict';

    const path = require('path');
+   const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  mode: 'development',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
+   hot: true
  },
  module: {
    rules: [
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader'
        }
      }
    ]
  },
+ plugins: [
+   new webpack.HotModuleReplacementPlugin()
+ ]
};
複製代碼

咱們修改一下文件，造成引用關係

index.js

'use strict'
import { test } from './page1.js'
document.write('hello world~1234')

test()
複製代碼

page1.js

'use strict'

module.exports = {
  test: function () {
    console.log(11123456)
  }
}
複製代碼

在入口頁index.js面再添加一段

if (module.hot) {
  module.hot.accept();
}
複製代碼

OK，接下來執行

npm run dev
複製代碼

而後咱們修改page1.js，會發現頁面並無刷新，只是更新了部分文件

這樣咱們的熱更新就實現了。

原理

整個的過程咱們能夠簡化一下， Webpack Compile打包文件傳輸給Bundle Server，Bundle Server就是一個服務器，而後會執行這些編譯後的文件，讓瀏覽器能夠訪問到。當文件產生變化時，Webpack Compile編譯以後會通知到HMR Server，HMR Server就會通知瀏覽器端的HMR Runtime作出修改。

HMR Runtime是會被打包到編譯後的js文件內，而後和HMR Server創建websocket通訊關係，這樣就能夠實時更新修改。

連接文章

webpack學習之路（五）loader初識及經常使用loader介紹

webpack學習之路（四）webpack-hot-middleware實現熱更新

webpack學習之路（三）webpack-dev-middleware

webpack學習之路（一）基礎配置

I am moving forward.