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 を表しますが、これは非常に直感的ではありません。プラグインを使用すると、より満足のいくものにすることができます

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

この時点でもう一度起動してください。

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

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;
  })
}

の実装とcomponent.js:

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

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

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;
};
/***/ })
})

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

this["webpackHotUpdate"] = 
 function webpackHotUpdateCallback(chunkId, moreModules) { // eslint-disable-line no-unused-vars  
     hotAddUpdateChunk(chunkId, moreModules);
    if(parentHotUpdateCallback) parentHotUpdateCallback(chunkId, moreModules);
  } ;

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

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

推奨読書:

vue2.0+boostrapプロジェクトを構築する方法

vueを使用してドメイン間でproxyTableパラメータを設定する方法

Angularエントリコンポーネントと宣言コンポーネントのケースの比較

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