webpackでHMRを手動で実装するいくつかの方法

1. はじめに

ご存知のとおり、Webpack のホットモジュール置換 (HMR) を使用すると、アプリケーションの実行中に変更されたモジュールを更新できるため、開発者はnpm run devを実行してページを更新する必要がなく、効果がタイムリーに表示されるため、フロントエンドの学生の生活が大幅に改善されることは間違いありません。
もちろん、現在ではvue-cli、create-react-appなど多くのscaffoldsがあります。これらのscaffoldsを通じて、プロジェクトを簡単にビルドでき、これらのscaffoldsはホットアップデート機能を自動的に構成します。これからは、webpack構成エンジニアは不要になります[escape]
しかし、場合によっては、ホットアップデートを手動で構成する必要があります。このブログでは、主にホットアップデートを手動で構成するためのいくつかの方法を紹介します。

2. GitHub

GitHub

3. 基本構成

開発には Vue フレームワークを使用するため (もちろん他のフレームワークも使用できます)、最初にいくつかの設定が必要です。

プロジェクトディレクトリ

這里寫圖片描述

ビルドディレクトリにはwebpack設定ファイルが含まれています
下のsrcはプロジェクトコードです

パッケージ.json

言うまでもなく、最初のステップはさまざまな依存関係をインストールすることです。基本的な依存関係は次のとおりです。

「devDependencies」: {
    "バベルコア": "^6.26.3",
    "バベルローダー": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "クロス環境": "^5.1.6",
    "css-loader": "^0.28.11",
    "html-webpack-プラグイン": "^3.2.0",
    「瞬間」: 「^2.22.2」、
    "vue-loader": "^15.2.4",
    "vue-テンプレートコンパイラ": "^2.5.16",
    "ウェブパック": "^4.11.1",
    "webpack-cli": "^3.0.3",
    "webpack-merge": "^4.1.2"
  },
  「依存関係」: {
    "バベルポリフィル": "^6.26.0",
    "vue": "^2.5.16"
  }

config.js は、

バックアップ用に、ビルドディレクトリに新しい webpack.config.js を作成します。このファイルは主に webpack の基本設定ファイルとして使用されます。一般的には、dev (開発) と build (本番) を区別しますが、2 つの状況の一部の設定は同じであるため、パブリック設定ファイルを作成することでコードの量を減らすことができます。 webpack.conf.jsのコードは次のとおりです。

定数パス = require('path');
webpack は 'webpack' を必要とします。
パッケージは './../package.json' を必要とします。
const VueLoaderPlugin = require('vue-loader/lib/plugin');
HtmlWebpackPlugin は 'html-webpack-plugin' を必要とします。
定数 moment = require('moment');
// バージョン番号を設定します const buildVersion = moment().format('YYYY-MM-DD_HH_mm_ss');

モジュール.エクスポート = {
    エントリ: path.join(__dirname, '../src/pages/main.js'),
    出力: {
        パス: path.resolve(__dirname, '../dist'),
        パブリックパス: '/',
        ファイル名: package.name + '.js'
    },
    モジュール: {
        ルール:[
            {
                テスト: /\.vue$/,
                ローダー: 'vue-loader',
                オプション: {}
            },
            {
                テスト: /\.css$/,
                使用： [
                    'vue-style-loader'、
                    'cssローダー'
                ]
            },
            {
                テスト: /\.js$/,
                ローダー: 'babel-loader',
                除外: /node_modules/
            }
        ]
    },
    プラグイン: [
        新しい VueLoaderPlugin()、
        新しいHtmlWebpackプラグイン({
            バージョン: ビルドバージョン、
            ファイル名: 'index.html',
            テンプレート: path.join(__dirname, '../src/pages/index.html'),
            挿入: '本文'
        })
    ]、
    外部: {
        'babel-polyfill': 'ウィンドウ'
    },
    開発ツール: 'ソースマップ'
}

コードはシンプルで理解しにくいものではありません

メイン.js

このファイルは主にvueインスタンスを作成するために使用されます

'babel-polyfill' をインポートします
'vue' から Vue をインポートします

'../container/main.vue' からアプリをインポートします。

新しいVue({
    el: '#app',
    レンダリング: h => h(App)
})

インデックス.html

テンプレートの役割を果たす

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="utf-8">
    <title>開発サーバー HRM</title>
    <meta name="ロボット" content="すべて" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0、ユーザースケーラブル=0、最小スケール=1.0、最大スケール=1.0、ビューポートフィット=カバー"
    />
    <!-- ツールバーとメニューバーを表示 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- ツールバーとメニューバーのスタイル -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- ハンドヘルド デバイス向けに最適化されています。主に、BlackBerry などのビューポートを認識しない古いブラウザー向けです -->
    <meta name="HandheldFriendly" content="true" />
    <!-- ページ内の数字を無視し、電話番号として識別します-->
    <meta name="format-detection" content="telephone=no" />
</head>
<本文>
    <div id="アプリ"></div>
</本文>
</html>

メイン.vue

主にホットローディングが成功するかどうかをテストするために使用されます

4.webpack-dev-server

Webpackはwebpack-dev-serverを使用してローカルサーバーを構築することができます。これは小さなExpressと同等であり、ホットローディングを実装するために使用できます。

パッケージ.json

webpack-dev-serverをインストールした後、package.jsonのスクリプトフィールドを設定する必要があります。

「スクリプト」: {
  "dev": "クロス環境 NODE_ENV=開発 webpack-dev-server --config build/dev.config.js",
   "ビルド": "クロス環境 NODE_ENV=production webpack-dev-server --config build/build.config.js",
  "test": "echo \"エラー: テストが指定されていません\" && exit 1"
}

注目すべきは、cross-envを通じてプラットフォーム間で環境変数を設定して使用できることです。開発用か本番用かを設定するために使用します。

dev.config.js

ビルドディレクトリに、dev用のwebpack設定ファイルとして新しいdev.config.jsを作成します。

定数 webpack = require('webpack')
定数config = require('./webpack.config.js')

// webpack4 以降で設定する必要がある変数 config.mode = "development";

config.devServer = {
    historyApiFallback:true、
    // hotパラメータは、更新によってページ全体を更新するか、部分更新するかを制御します。hot: true、
    // インラインはホットアップデートモード、もう1つはiframeです
    インライン: true、
    ポート: 80
}

// HotModuleReplacementPluginを必ず追加してください
config.plugins.push(
    新しい webpack.HotModuleReplacementPlugin()
）

// エクスポートする必要があります module.exports = config;

仕上げる

npm run devを実行し、main.vue を変更します。ブラウザを更新する必要はありません。webapck が自動的にパッケージ化して更新します。
実際、コンソールネットワークでホットリロードを開始するかどうかを直接決定できます。

這里寫圖片描述

webpack-dev-serverはWebSocketを使用して更新情報をブラウザに送信します

5.webpack-dev-middleware + webpack-hot-middleware

webpack-dev-serverの使用に加えて、webpack-dev-middleware + webpack-hot-middlewareを使用してホットリロードを実現することもできますが、これら2つのモジュールにはサーバー機能がないため、expressもインストールする必要があります。

パッケージ.json

同様に、すべての依存関係がインストールされた後、package.jsonのスクリプトフィールドを構成する必要があります。

「スクリプト」: {
  "dev": "クロス環境 NODE_ENV=開発ノード ./build/dev.config.js",
  "build": "クロス環境 NODE_ENV=production node ./build/build.config.js",
  "test": "echo \"エラー: テストが指定されていません\" && exit 1"
},

dev.config.js

この解決策では、dev.config.jsにさらにコードを記述する必要があります。

const app = require('express')();
webpack は、次のコードで定義されます。
webpackDevMiddleware は、次の例のように、webpack-dev-middleware を実装します。
webpackHotMiddleware を require("webpack-hot-middleware");
定数パス = require("パス");
config = require("./webpack.config") を設定します。

config.mode = "開発";

// 非常に重要 config.entry = [config.entry,'webpack-hot-middleware/client'];

config.plugins.push(
    新しい webpack.HotModuleReplacementPlugin()、
    // HMR が有効な場合、このプラグインはモジュールの相対パスを表示します。開発環境では新しい webpack.NamedModulesPlugin() が推奨されます。
）

定数コンパイラ = webpack(config);

// dev-middleware と hot-middleware の使用

const devMiddleware = webpackDevMiddleware(コンパイラ、{
    パブリックパス: config.output.publicPath、
    静か：本当
})

const hotMiddleware = webpackHotMiddleware(コンパイラ、{
    ログ: 偽、
    ハートビート: 2000
})

app.use(devMiddleware);
app.use(hotMiddleware);
アプリをリッスンする(80);

webpack-dev-serverとは異なり、ここで使用されている2つのモジュールにはサーバー機能がないため、サービスを開始するにはexpressのみを使用できます。

仕上げる

npm run devを実行し、main.vue を変更します。ブラウザを更新する必要はありません。webapck が自動的にパッケージ化して更新します。
コンソールネットワークでホットリロードを開始するかどうかを直接決定することもできます

這里寫圖片描述

この場合、webpack は eventSource を使用してブラウザと通信します。websocket の双方向通信とは異なり、eventsource はサーバーからクライアントへの通信のみ可能です。

これで、webpack を使用して HMR を手動で実装するいくつかの方法について説明したこの記事は終了です。関連する webpack HMR コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援してください。

以下もご興味があるかもしれません: