webpack 4 筆記五 模塊熱替換

隨着深入學習,新的知識點不斷出現,一些知識點可能涉及到很深的知識架構,這裏只是簡單的接觸,並不深入,在以後深入使用時再做詳細介紹。

模塊熱替換

模塊熱替換(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允許在運行時更新各種模塊,而無需進行完全刷新。

這裏是他的一個詳細概念

前面說了, 使用 webpack-dev-server 可以實現瀏覽器自動加載、自動重新加載編譯後的代碼,這就是頁面的自動刷新,但這裏的刷新,是頁面整體的完全刷新,而模塊熱替換,實現的是頁面模塊(比如一個按鈕的功能修改)的更新,而無需重新加載整個頁面。

啓用 HMR 功能第一步

HMR 的啓用十分簡單,
一、首先是更新 webpack-dev-server 的配置,和使用 webpack 內置的 HMR 插件即可。同時刪掉 print.js 的入口起點,因爲它現在正被 index.js 模塊使用
webpack-dev-server

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
+ const webpack = require('webpack');

  module.exports = {
    entry: {
-      app: './src/index.js',
-      print: './src/print.js'
+      app: './src/index.js'
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
+     hot: true
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Hot Module Replacement'
      }),
+     new webpack.HotModuleReplacementPlugin()
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

二、修改 index.js 文件,以便當 print.js 內部發生變更時可以告訴 webpack 接受更新的模塊
index.js

...
  document.body.appendChild(component());
+
+ if (module.hot) {
+   module.hot.accept('./print.js', function() {
+     console.log('Accepting the updated printMe module!');
+     printMe();
+   })
+ }

三、命令行啓用服務 npm start
四、更改 print.js 中 console.log 的輸出內容
print.js

 export default function printMe() {
-   console.log('I get called from print.js!');
+   console.log('Updating print.js...')
 }

顯示器輸出如下
console
在這裏插入圖片描述
以上,就啓用了 HMR 功能,實現了單擊按鈕模塊的熱更新,但這裏還有個小問題,就是如果繼續點擊示例頁面上的按鈕,會發現控制檯仍在打印這舊的 printMe 功能。

啓用 HMR 功能第二步

使用 module.hot.accept 更新綁定到新的 printMe 函數上
index.js

...

- document.body.appendChild(component());
+ let element = component(); // 當 print.js 改變導致頁面重新渲染時,重新獲取渲染的元素
+ document.body.appendChild(element);

  if (module.hot) {
    module.hot.accept('./print.js', function() {
      console.log('Accepting the updated printMe module!');
-     printMe();
+     document.body.removeChild(element);
+     element = component(); // 重新渲染頁面後,component 更新 click 事件處理
+     document.body.appendChild(element);
    })
  }

這樣,但修改 print.js 的輸出內容後,頁面實現自動刷新,當再次點擊按鈕時,輸出內容會更改
在這裏插入圖片描述

使用 HMR 修改樣式表

藉助於 style-loader 的幫助,CSS 的模塊熱替換實際上是相當簡單的。當更新 CSS 依賴模塊時,此 loader 在後臺使用 module.hot.accept 來修補(patch)

一、安裝兩個 loader

cnpm install --save-dev style-loader css-loader

注意
這裏最好是再裝一遍兩個 loader ,雖然之前第一節的時候已經裝了一遍,但(由於我刪了重裝好幾遍 node_modules 文件夾,導致這裏沒重裝報錯,具體原因也不甚明瞭)最好還是重裝一遍

二、更新 webpack 的配置,讓這兩個 loader 生效
三、手動添加 style.css 樣式表
四、導入 index.js 文件中
具體請參考webpack筆記二 管理資源之加載css、圖片、字體、數據.
五、將 hello 上的樣式修改爲 color: blue;,可以立即看到 Hello webpack 的字體顏色隨之更改,而無需完全刷新。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章