Webpack がホットアップデートを構成する方法

HMRとは

を意味しHot Module Replacement、と略されますHMR。更新する必要があるモジュールについては、「ホット」置換を実行します。いわゆるホット置換とは、ページを更新せずに特定の変更をシームレスに更新することを指します。を設定しない場合HMR、変更を加えるたびに変更結果を確認するためにページを更新する必要があります。デバッグの場合、非常に面倒で非効率的です。最も重要なことは、インターフェース上で変更したデータが、ページが更新されるとページは失われますが、Webpackホットアップデートと同様のメカニズムがある場合はコードが変更され、更新は行われませんが、既存のデータ状態が保持され、モジュールの更新と置換のみが行われます。つまり、既存のデータの状態が保存されるだけでなく、コード変更後の変更も確認できます。

要約:

ページの読み込み時にアプリケーションの状態を保存する
変更された内容のみを更新し、デバッグ時間を節約します
スタイルの変更は高速であり、ブラウザでスタイルを変更するのとほぼ同等です。

依存関係をインストールする

$ npm install webpack webpack-dev-server --save-dev

package.json：

"dependencies": {
    "webpack": "^4.41.2",
    "webpack-dev-server": "^3.10.1"
},

構成

webpack:

devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true,
    historyApiFallback: true,
    compress: true
},

hotの場合true、ホットアップデートを有効にすることを意味します
contentBaseコンテンツの提供元をサーバーに指示することを示します。(つまり、サーバー起動時のルートディレクトリ。デフォルトは現在の実行ディレクトリです。通常は設定する必要はありません)
historyApiFallbackHTML5Historyを使用する場合API、index.htmlほとんどの場合、404 応答の代わりにこのページを提供する必要があります。
compressすべてのサービスのgzip圧縮を有効にする

plugins: {
    HotModuleReplacementPlugin: new webpack.HotModuleReplacementPlugin()
},

ホットアップデートプラグインを設定する

module: {
    rules: [
        {
            test: /\.(css|less)$/,
            use: [
                process.env.NODE_ENV == 'development' ? { loader: 'style-loader' } : MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1
                    }
                }
            ]
        }
    ]
},

style-loaderライブラリはHMRインターフェイスを実装しており、HMR更新を経由で受信すると、古いスタイルを新しいスタイルに置き換えます。異なる使用法で開発環境と実稼働環境を区別します。loader。

src/index.jsx：

if (module.hot) {
    module.hot.accept();
}

エントリファイルに上記のコードを追加するだけです。非常に簡単です。

反応ホットローダー

react-hot-loaderプラグイン、ポータル

使い方

インストール

$ npm install react-hot-loader --save-dev

構成babelrc

{
  "plugins": ["react-hot-loader/babel"]
}

ルートコンポーネントをホットエクスポートとしてマークする

import { hot } from 'react-hot-loader/root';
const App = () => <div>Hello World!</div>;
export default hot(App);

Reactとの前にReact Dom、必ずReactホットローダーを要求してください。

// webpack.config.js
module.exports = {
  entry: ['react-hot-loader/patch', './src'],
  // ...
};

問題に遭遇する

その場合はYou cannot change <Router history>、次のように設定します。

import { hot } from 'react-hot-loader/root';
const Routes = () => {};
export default hot(Routes);

ホットアップデートを構成した後、webpack自動コンパイルの問題が 2 回発生しました。これは非常に頻繁に発生します。具体的な原因は分析されていません。適切な解決策を見つけました。構成:

watchOptions: {
    aggregateTimeout: 600
},

他にも問題が発生する可能性があり、たとえば、そのindex.htmlページを何度も導入したり、グローバルにインストールしたのにindex.jsローカルに複製され、グローバルをアンインストールしたりすることができます。webpack-dev-serverwebpack-dev-serverwebpack-dev-server

ケース

トリスターナ

ブログ

私のブログをフォローすることを歓迎します