ホットモジュール交換のどのような面がこの記事ですか？

Question

私はWebpackを勉強しており、this articleを訪れています。 私はホットモジュール交換（HMR）が何であるかについて一般的な考えを持っています。 私は、サンプルコード以下でのWebPACKのHMRプラグインを設定することができます

var plugins = [ new webpack.HotModuleReplacementPlugin(), // using HMR plugin 
      new HtmlWebpackPlugin({template: './index.html'}) 
     ]; 

module.exports = { 
    // webpack config object 
    context: entryBasePath, 
    entry:{ 
     app: ['webpack/hot/dev-server', './bootstrap.js'] 
    }, 
    output: { 
     path: outputBasePath, 
     filename: './bundle.js', 
     sourceMapFilename: '[file].map' // set source map output name rule 
    }, 
    devtool: 'source-map', // enable source map 
    plugins: plugins, 
    module: { 
     loaders: [ 
      { test: /\.scss$/, loader: 'style!css!sass'}, 
      { test: /\.tpl$/, loader: 'raw' }, 
      { 
     test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'url?limit=10000' 
     }, 
     { 
     test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, 
     loader: 'file' 
     }, 
     { test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' } 

     ] 
    } 

} 

私の質問はthis articleの側面は、WebPACKのホットモジュールの交換についてご説明しようとしているとは何ですか？そのページに提供されているサンプルコードはどこで使用できますか？

要するに、私の質問は何ですか（地獄）は約thisですか？

Answer 1

ホットモジュール置き換え（HMR）は、アプリケーションの実行中にコードをスワップアウトする機能です。アプリケーションの状態を保持しながらコードを編集することができます。これは、ブラウザを再ロードせずにスタイルを更新するだけのスタイリングに特に便利です。

これは、コードが前のコードを削除し、すべての副作用を元に戻して新しいコードを挿入する特別なフックを提供する場合にのみ可能です。典型的な副作用：イベントリスナーの登録、オブジェクトへのデータの格納、グローバル状態の変更です。

たとえば、アプリケーションの実行中にCSSを置き換えるのは、CSSが定義ごとに副作用がないため、簡単な作業です。 HMRの内部を理解するために、のはstyle-loaderを見てみましょう：

スタイル・ローダーは、（私はこの例のために重要ではありませんいくつかのコードを削除した）HMRを処理するためにthis special codeを追加：

if (module.hot) { 
    // When the styles change, update the <style> tags 
    module.hot.accept(loaderUtils.stringifyRequest(this, !!remainingRequest), function() { 
     var newContent = require(loaderUtils.stringifyRequest(this, !!remainingRequest)); 
     update(newContent); 
    }); 
    // When the module is disposed, remove the <style> tags 
    module.hot.dispose(function() { 
     update(); 
    }); 
} 

• if (module.hot) {チェック、HMRが有効になっている場合
• module.hot.accept(<module identifier>, handler)は、新しいコード
• module.hot.dispose(handler)を注入するハンドラは、古いコードを配置するハンドラを登録する登録します

update functionは読みにくいですが、それは基本的にはちょうどdocument.headに新しいスタイルシートを追加し、未使用のスタイルシートを削除します。

リアクションのHMRはもう少し複雑で、月の最後のカップルで深刻なリファクタリングを行っています。しかし、基本的な原則は、すべてのエクスポートされたコンポーネントがプロキシの中にラップされることです。プロキシは別のオブジェクトのように動作するオブジェクトです。これは、すべての関数を "実際の"オブジェクトに転送するか、ES2015 proxies（明らかにはるかに強力です）を使用して実現できます。このようにして、他のコンポーネントを更新することなく元のオブジェクトを簡単にスワップアウトすることができます。私はこれをもう少し詳細にanother SO answerで説明しました。 HMRの仕事をするためには

---

、満たすべきいくつかの要件があります

• あなたのコードは、コードの更新を処理するためにmodule.hot.acceptとmodule.hot.disposeためのフックが必要です。これは、通常、ローダ（スタイルローダなど）またはバベル変換（たとえば、babel-preset-react-hmreプリセット）によって実現されます。技術的には、あなたはも、すべてのモジュールでこれらのフックを自分で書くことができます...おそらくそれは内部の学習を開始する良い方法です。更新されたモジュールにこのコードが含まれていないか、更新を処理できない場合、更新は拒否され、webpackはブラウザウィンドウを再読み込みします。これはのようになります。はHMRと似ていますが、実際はブラウザの更新だけです。

• WebSocket接続を確立し、新しいコードをクライアントにプッシュし、すべての古いモジュールに更新を処理するよう通知するために、クライアントとサーバーにインフラストラクチャが必要です。これを実現する最も簡単な方法は、webpack-dev-serverをwebpack-dev-server --hot --inlineとすることです。その他のコードは必要ありません。特に、webpack.config.jsにHMRプラグインまたはwebpack-dev-serverのものを追加しないでください。すべて--hot --inlineで有効になります。これを設定するには、設定に応じて実際に必要な設定があります。これは、通常、この部分が新入社員にとってしばしば混乱する理由です。

• 変更されたファイルのみを処理したいので、Webpackを監視モードで実行する必要があります。 webpack-dev-serverまたはwebpack-dev-middlewareを使用しているときには、コンフィグレーションに何も追加する必要はありません。すでにwebpack compiler into watch-mode（もちろんlazy: falseの場合のみ）を追加します。