Webpackモジュールのホットリプレースについての詳しい説明

今回は、Webpack モジュールのホットリプレースについて詳しく説明します。Webpack モジュールのホットリプレースを使用する際の 注意事項 は何ですか?実際のケースを見てみましょう。

正式名称はHot Module Replacement (HMR)で、ホットモジュール交換またはモジュールホットスワップと同じ意味で、動作中にプログラムモジュールを更新します。

この機能は主に開発プロセスで使用され、本番環境では役に立ちません (これが .net ホット スワップとの違いです)。その結果、インターフェイスがリフレッシュ不要で更新されます。

HMR は WDS に基づいており、スタイルローダーはそれを使用して、更新せずにスタイルを更新できます。ただし、

JavaScript モジュールの場合は、少し追加の処理が必要です。その対処方法は以下に続きます。 HMR は開発環境で使用するため、構成を変更し、2 つの準備を行います。 1 つは実稼働用、もう 1 つは開発用です。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const PATHS = {
  app: path.join(dirname, 'app'),
  build: path.join(dirname, 'build'),
};
const commonConfig={
 entry: {
    app: PATHS.app,
  },
  output: {
    path: PATHS.build,
    filename: '[name].js',
  },
  plugins: [    new HtmlWebpackPlugin({
      title: 'Webpack demo',
    }),
  ],
} 
function developmentConfig(){
  const config ={
    devServer:{      //使能历史记录api
      historyApiFallback:true,       hotOnly:true,//关闭热替换 注释掉这行就行
       stats:'errors-only',
      host:process.env.Host,
      port:process.env.PORT,
      overlay:{
        errors:true,
        warnings:true,
      }
    },
     plugins: [      new webpack.HotModuleReplacementPlugin(),
    ],
  };   return Object.assign(
    {},
    commonConfig,
    config,
    {
      plugins: commonConfig.plugins.concat(config.plugins),
    }
  );
}
module.exports = function(env){
  console.log("env",env);  if(env=='development'){    return developmentConfig();
  }   return commonConfig;
};

この webpack.config.js は 2 つの構成を作成します。1 つは commonConfig で、もう 1 つはdevelopmentConfig です。この 2 つは env パラメーターによって区別されますが、この env パラメーターはどこから来たのでしょうか。前の package.json のセクションを見てみましょう:

つまり、上記の設定に従い、npm start を通じて起動すると、開発環境の設定に入ります。環境へのアプローチとなります。ビルド方法については最初のセクションで説明されていますが、npm を介して直接 Webpack を起動します。これには WDS は含まれません。さらに、構成をマージするための Object.assign 構文もあります。この時点で、npm start を実行すると、コンソールに 2 つのログが出力されます。

HRMが有効化されたようです。ただし、この時点で、component.js を更新してください

ログには、何もホットアップデートされていないことが示されています。この 39,36 はモジュール ID を表しますが、これは非常に直感的ではありません。プラグインを使用すると、より満足のいくものにすることができます。

rreee

この時間からやり直します。

このように、名前は直感的です。しかし、私たちが楽しみにしていたアップデートはまだ公開されていません。インターフェース

 plugins: [      new webpack.HotModuleReplacementPlugin(),       new webpack.NamedModulesPlugin(),
    ],

の実装とcomponent.js:

import component from './component';
let demoComponent=component();
document.body.appendChild(demoComponent);//HMR 接口if(module.hot){
    module.hot.accept('./component',()=>{
        const nextComponent=component();
        document.body.replaceChild(nextComponent,demoComponent);
        demoComponent=nextComponent;
    })
}

の修正が必要なので今回はページを更新します。ページが変更されるたびに、次のような hot-update.js を含むファイルが追加されます:

export default function () {  var element = document.createElement('h1');
  element.innerHTML = 'Hello webpack';  return element;
}

webpackHotUpdate を通じて対応するモジュールを更新します。 0はモジュールのIDを表し、「./app/component.js」はモジュールに対応する名前を表します。構造は webpack(id,{key:function(){}}) です。関数の外側に括弧がありますが、それが何をするのかわかりません。 webpackHotUpdate の定義は次のとおりです:

webpackHotUpdate(0,{/***/ "./app/component.js":/***/ (function(module, webpack_exports, webpack_require) {"use strict";
Object.defineProperty(webpack_exports, "esModule", { value: true });/* harmony default export */ webpack_exports["default"] = function () {  var element = document.createElement('h1');
  element.innerHTML = 'Hello web  ';
  element.className='box';  return element;
};/***/ })
})

構造的な観点から見ると、1 つは ID で、もう 1 つは対応する変更されたモジュールです。ただし、実際に更新を実行するのは hotApply メソッドです。ホット アップデートのメカニズム全体はまだ少し複雑で、その効果は MVVM バインディングに似ています。興味のある方は深く勉強してみてはいかがでしょうか。 HMR を実稼働環境で使用することはお勧めできません。ファイル全体が大きくなり、生成に役に立たなくなるためです。次のセクションでは、スタイルローダーでの HMR の使用について説明します。ただし、js モジュールの場合は、追加のコードを記述する必要があり、少し面倒です。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

webpackのスタイルローディングの詳しい説明

最初にJSイベントを発行してからサブスクライブする方法

vue2 Family Bucketとは何ですか?その使い方は?

以上がWebpackモジュールのホットリプレースについての詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。