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 関連の依存関係やファイルなどを削除できます

。
2. パッケージ。 json 依存関係を babel-loader webpack-dev-server 反応ホットローダーに追加します (最も重要)

3. package.json コマンド ライン設定 "dev": "webpack-dev-server --inline -- progress --config build /webpack.dev.conf.js"

4. webpack.base.conf .jsx ファイルの追加は babel-loader で処理する必要があり、オプションを設定します: {plugins:['react-hot-loader/ babel']}

5. .babelrc プリセットが React に追加され、プラグインが以下に追加されます: ['react-hot-loader/babel']

6. src フォルダーに main.js を作成します (名前は(webpack によって設定された

   エントリー ファイル と一致します)

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 が登場しようとしています。公式の使用方法に従って、ホットリロードを引き続き使用できます。

追記: 参考までに、私も多くの反応コードを調べて学習しています

この記事の事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングな情報については、 の他の関連記事に注目してください。 PHPの中国語サイトです！

推奨読書:

webpack でパッケージ化された大きなファイルを扱う方法

vue.js に npm をインストールする方法

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