Webpack のホット リフレッシュとホット ロードの使用方法の詳細な説明

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

Webpack は非常に強力であり、適切なスキャフォールディングにより、退屈で無意味な作業を大幅に節約できます。その中でも、ホット リフレッシュとホット ローディングは、従来の開発と比較して開発ペースを大幅に向上させます。

スキャフォールディングからのホットリフレッシュとホットロードの違いを発見してください

ほとんどの Vue 開発者は vue-cli から始めると思いますが、vue-cli の設定を自由に変更することはできません。 webpack は確かに非常に複雑であり、vue-cli も初心者向けのエクスペリエンスを最適化するために多くの作業を行っています)。

対照的に、react は比較的堅牢な足場を提供しません (少なくとも私には明らかに見つかりません。教えていただければ幸いです)。私の知る限り、その 1 つは yeoman のgenerator-react-webpack、reactのcreate-react-app、そして優れたreact-starter-kit (ホットロードで、多くのコードが統合されており、よく参照されています) です。

React を学習していたとき、上記の最初の 2 つの React スキャフォールドがホット ロードではなくホット リフレッシュを提供することを発見しました。

ホットロードとホットリフレッシュの簡単な区別:

ホットリフレッシュ: ファイルが内部的に変更された後、状態(コンテンツが入力された入力フォームなど)を保持せずにページ全体が更新されます。 Webpack が F5 を押すのと同等です。 リフレッシュ

ホットロード: ファイルが変更された後、最小限のコストで変更された領域が変更されます。ファイルを変更する前の状態を保持するようにしてください (入力内容を入力した後、他のタグのコードを修正します)

どちらも従来の開発 (手動 F5) と比較して開発エクスペリエンスが向上していますが、両者の間にはまだ違いがあります非常に大きく、特にプロジェクトがより複雑になるにつれて、この問題をきっぱりと解決する必要があります (バグの開発により多くの時間を残しておきます)。

実践的な変更

ゼロからの設定は別の領域なので、vue-cli から直接変更を加え始めます。

以下の手順は、インスピレーションを参照するためのキーのみをリストしたものです。詳細については、最終的な github の完全なプロジェクトを参照してください

1. vue 関連の依存関係やファイルなどを削除できます

   。
パッケージ。 json 依存関係を babel-loader webpack-dev-server 反応ホットローダーに追加します (最も重要)
package.json コマンド ライン設定 "dev": "webpack-dev-server --inline -- progress --config build /webpack.dev.conf.js"
webpack.base.conf .jsx ファイルの追加は babel-loader で処理する必要があり、オプションを設定します: {plugins:['react-hot-loader/ babel']}
.babelrc プリセットが React に追加され、プラグインが以下に追加されます: ['react-hot-loader/babel']
src フォルダーに main.js を作成します (名前は(webpack によって設定された
6. エントリー ファイル

   と一致します)

   import 'core-js/fn/object/assign';
   import React from 'react';
   import ReactDOM from 'react-dom';
   import { hot } from 'react-hot-loader';
   import App from './pages/App'; // 自己写吧
   import './assets/css/reset.scss';
   // Render the main component into the dom
   ReactDOM.render(<App/>, document.getElementById('app'));
   export default hot(module)(App); // 热加载的关键

この時点で、私たちは喜んで React を使用してホットロードの喜びを体験することができます~

問題

は、実際には main.js を単純に変更することですvue-cli 内のファイルをリアクション関連コードに編集し (jsx を処理できるように babel を設定することを忘れないでください)、引き続きホット リフレッシュを行います。

ローカル コードを観察して比較した後、魅力的な名前を見つけました:

webpack.dev.conf ファイル内:

new webpack.HotModuleReplacementPlugin()

オンラインで検索した後

、これがホット ロードを実現するための鍵であることが分かりました。コード自体には モジュール性 の性質があるため (つまり、3 つの主要なフレームワークのような再利用可能なコンポーネントを作成できるフレームワークはこの特性を利用できます)、コードの接続と接続解除によってホット ローディングを実現できます。 React の JSX 特殊効果は HotModuleReplacementPlugin では処理できず、ホット リフレッシュのみ可能です。

この場合、react-hot-loader が登場しようとしています。公式の使用方法に従って、ホットリロードを引き続き使用できます。

追記：参考までに、私もたくさんの反応コードを探索して学習しています

設定されたプロジェクトのアドレス：gayhub

この記事の事例を読んだ後、あなたは方法をマスターしたと思いますさらにエキサイティングなものについては、お支払いください。他のphp中国語ウェブサイト関連記事にも注目してください!

推奨読書:

vue-cli マルチモジュールのパッケージ化と使用法の詳細な説明

ノード+トークンは検証を実装します

以上がWebpack のホット リフレッシュとホット ロードの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。