webpack 模組熱更新 Hot Module Replacement

garynan發表於2019-03-17
Web

webpack 模組熱更新 Hot Module Replacement

GitHub 學習 Demo。

Hot Module Replacement (簡稱 HMR) 是一個由 webpack 提供的最有用的功能之一。它允許在執行時更新所有型別的模組，而不需要完全重新整理。

意思就是，部分的程式碼更新。而不是重新編譯後重新整理。

這篇文章關注的是功能的實現。如果想了解熱更新的實現原理，請點選連結。

warnning ： 本指南中的工具僅用於開發，請避免在生產中使用它們！

啟用 HMR

這個功能可以大大提升你的開發效率。在下面的例子中，將會去除 print.js 的入口,直接由 index.js 使用。

tips:
如果你是使用 webpack-dev-middleware 中介軟體 來搭建開發伺服器的話，請新增 webpack-hot-middleware 中介軟體來開啟 HMR。

修改專案

# webpack.config.js

 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 去接受這個已更新的 module。

# src/index.js

import _ from 'lodash';
  import printMe from './print.js';

  function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;

    element.appendChild(btn);

    return element;
  }

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

執行專案

npm start
# npx webpack-dev-server --config webpack.config.js
複製程式碼

執行專案後，嘗試修改print.js中console.log輸出的內容, 然後你會發現，每當模組更新後，瀏覽器的控制檯都會輸出新的內容。 說明新的改動已被 webpack 載入。

[WDS] App updated. Recompiling...
client:243 [WDS] App hot update...
index.js:24 Accepting the updated printMe module!
複製程式碼

但是，你會發現再點選按鈕還是輸出原來的內容。別急，後面會讓這部分也更新。

webpack-dev-server 的 Node API 用法

當你使用這種方式搭建你的開發環境的時候。不要在 webpack 的配置物件中宣告 devServer 選項。而且需要顯示的呼叫 webpack-dev-server 包下的 addDevServerEntrypoints 方法宣告 webpack 的入口檔案。

# server.js

const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');

const config = require('./webpack.config.js');
const options = {
  contentBase: './dist',
  hot: true,
  host: 'localhost'
};

webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);

server.listen(5000, 'localhost', () => {
  console.log('dev server listening on port 5000');
});
複製程式碼

tips:
如果你是使用 webpack-dev-middleware 中介軟體 來搭建開發伺服器的話，請新增 webpack-hot-middleware 中介軟體來開啟 HMR。

Gotchas

Hot Module Replacement 可能很棘手。剛的例子未解決的問題是，模組更新後，點選按鈕還是輸出舊的內容。

這是因為，這是 DOM 元素依舊繫結的是舊的方法。。。。

解決方法之一是，手動更新 DOM 事件繫結的方法:

# src/index.js

  import _ from 'lodash';
  import printMe from './print.js';

  function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;  // onclick event is bind to the original printMe function

    element.appendChild(btn);

    return element;
  }

- document.body.appendChild(component());
+ let element = component(); // Store the element to re-render on print.js changes
+ 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(); // Re-render the "component" to update the click handler
+     document.body.appendChild(element);
    })
  }
複製程式碼

但這樣顯得很麻煩。後面會提到一些 loaders 可以讓我們更方便的使用 HMR。

樣式表的 HMR

CSS 的 Hot Module Replacement 實際上是依賴 style-loader 的幫助。當 CSS 依賴更新的時候，這個 loader 通過 module.hot.accept 在幕後更新 <style> 標籤。

安裝依賴

npm install --save-dev style-loader css-loader
複製程式碼

修改專案

  webpack-demo
  | - package.json
  | - webpack.config.js
  | - /dist
    | - bundle.js
  | - /src
    | - index.js
    | - print.js
+   | - styles.css

# src/styles.css

body {
  background: blue;
}

# index.js

  import _ from 'lodash';
  import printMe from './print.js';
+ import './styles.css';

  function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;  // onclick event is bind to the original printMe function

    element.appendChild(btn);

    return element;
  }

  let element = component();
  document.body.appendChild(element);

  if (module.hot) {
    module.hot.accept('./print.js', function() {
      console.log('Accepting the updated printMe module!');
      document.body.removeChild(element);
      element = component(); // Re-render the "component" to update the click handler
      document.body.appendChild(element);
    })
  }

# webpack.config.js

  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'
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
      hot: true
    },
+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: ['style-loader', 'css-loader']
+       }
+     ]
+   },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Hot Module Replacement'
      }),
      new webpack.HotModuleReplacementPlugin()
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
複製程式碼

你會發現，當你修改樣式表後，瀏覽器中頁面的樣式已經變化了。

使用 loaders 便捷使用 HMR

  • React Hot Loader: Tweak react components in real time.
  • Vue Loader: This loader supports HMR for vue components out of the box.
  • Elm Hot Loader: Supports HMR for the Elm programming language.
  • Angular HMR: No loader necessary! A simple change to your main NgModule file is all that's required to have full control over the HMR APIs.

更多閱讀

NEXT

後面我們將探討如何利用 webpack 來對專案進行各種的優化。第一個講解 Tree Shaking 搖樹處理。

相關文章