Mehrere Möglichkeiten zur manuellen Implementierung von HMR in Webpack

Inhaltsverzeichnis

1. Einleitung
2. GitHub
3. Grundkonfiguration

Projektverzeichnis
Paket.json
webpack.config.js
Haupt-JS
Hauptseite
Haupt-Vue

4.webpack-dev-server

Paket.json
dev.config.js
Beenden

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

Paket.json
dev.config.js
Beenden

1. Einleitung

Wie wir alle wissen, kann die Verwendung von Hot Module Replacement (HMR) in Webpack die geänderten Module aktualisieren, wenn die Anwendung ausgeführt wird, ohne dass der Entwickler npm run dev erneut ausführen und die Seite aktualisieren muss. Der Effekt kann rechtzeitig angezeigt werden, was das Leben von Front-End-Studenten zweifellos erheblich verbessert.
Natürlich gibt es derzeit viele Gerüste, wie z. B. Vue-CLI, Create-React-App usw. Mit diesen Gerüsten können wir problemlos Projekte erstellen, und diese Gerüste konfigurieren die Hot-Update-Funktion automatisch für uns. Von nun an brauchen wir keine Webpack-Konfigurationsingenieure mehr [Escape]
In manchen Fällen müssen wir Hot-Updates jedoch immer noch manuell konfigurieren. In diesem Blog werden hauptsächlich verschiedene Methoden zum manuellen Konfigurieren von Hot-Updates vorgestellt.

2. GitHub

GitHub

3. Grundkonfiguration

Da wir für die Entwicklung das Vue-Framework verwenden (natürlich können auch andere Frameworks verwendet werden), sind zunächst einige Konfigurationen erforderlich.

Projektverzeichnis

這里寫圖片描述

Das Build-Verzeichnis enthält die Webpack-Konfigurationsdatei
Unter src steht der Projektcode

Paket.json

Es versteht sich von selbst, dass der erste Schritt darin besteht, verschiedene Abhängigkeiten zu installieren. Die grundlegenden Abhängigkeiten sind wie folgt

"devAbhängigkeiten": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "Umweltkreuz": "^5.1.6",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "Moment": "^2.22.2",
    "vue-loader": "^15.2.4",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.11.1",
    "webpack-cli": "^3.0.3",
    "webpack-merge": "^4.1.2"
  },
  "Abhängigkeiten": {
    "babel-polyfill": "^6.26.0",
    "vue": "^2.5.16"
  }

webpack.config.js

Erstellen Sie zur Sicherung eine neue webpack.config.js im Build-Verzeichnis. Diese Datei wird hauptsächlich als grundlegende Konfigurationsdatei für webpack verwendet. Im Allgemeinen unterscheiden wir zwischen dev (Entwicklung) und build (Produktion), aber einige Konfigurationen der beiden Situationen sind gleich, sodass das Erstellen einer öffentlichen Konfigurationsdatei die Codemenge reduzieren kann. Der Code in webpack.conf.js lautet wie folgt

const path = require('Pfad');
const webpack = erfordern('webpack');
const-Paket = erforderlich('./../paket.json');
const VueLoaderPlugin = erfordern('vue-loader/lib/plugin');
const HtmlWebpackPlugin = erfordern('html-webpack-plugin');
const moment = erforderlich('Moment');
// Versionsnummer festlegen const buildVersion = moment().format('JJJJ-MM-TT_HH_mm_ss');

modul.exporte = {
    Eintrag: Pfad.join(__dirname, '../src/pages/main.js'),
    Ausgabe: {
        Pfad: Pfad.auflösen(__dirname, '../dist'),
        öffentlicher Pfad: '/',
        Dateiname: Paketname + '.js'
    },
    Modul: {
        Regeln:[
            {
                Test: /\.vue$/,
                Lader: „vue-loader“,
                Optionen: {}
            },
            {
                Test: /\.css$/,
                verwenden: [
                    „Vue-Style-Loader“,
                    „CSS-Lader“
                ]
            },
            {
                Test: /\.js$/,
                Lader: 'babel-loader',
                ausschließen: /node_modules/
            }
        ]
    },
    Plugins: [
        neues VueLoaderPlugin(),
        neues HtmlWebpackPlugin({
            Version: BuildVersion,
            Dateiname: 'index.html',
            Vorlage: Pfad.Join(__Dirname, '../src/pages/index.html'),
            injizieren: 'Körper'
        })
    ],
    Äußerlichkeiten: {
        „babel-polyfill“: „Fenster“
    },
    devtool: „Quellkarte“
}

Der Code ist einfach und nicht schwer zu verstehen

Haupt-JS

Diese Datei wird hauptsächlich zum Erstellen einer Vue-Instanz verwendet

importiere 'babel-polyfill'
Vue von „vue“ importieren

App aus „../container/main.vue“ importieren

neuer Vue({
    el: '#app',
    rendern: h => h(App)
})

Hauptseite

Die Rolle der Vorlage spielen

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="utf-8">
    <Titel>Entwicklerserver HRM</Titel>
    <meta name="robots" content="alle" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover"
    />
    <!-- Symbolleiste und Menüleiste anzeigen -->
    <meta name="apple-mobile-web-app-fähig" content="ja" />
    <!-- Symbolleisten- und Menüleistenstile -->
    <meta name="apple-mobile-web-app-status-bar-style" content="schwarz" />
    <!-- Optimiert für Handheld-Geräte, vor allem für einige alte Browser, die das Ansichtsfenster nicht erkennen, wie z. B. BlackBerry-->
    <meta name="HandheldFriendly" content="true" />
    <!-- Nummern auf der Seite ignorieren und als Telefonnummern identifizieren-->
    <meta name="format-detection" content="telefon=nein" />
</Kopf>
<Text>
    <div id="app"></div>
</body>
</html>

Haupt-Vue

Wird hauptsächlich verwendet, um zu testen, ob Hot Loading erfolgreich ist

4.webpack-dev-server

Webpack kann mithilfe von webpack-dev-server einen lokalen Server erstellen, der einem kleinen Express entspricht, und wir können damit Hot-Loading implementieren

Paket.json

Nach der Installation von webpack-dev-server müssen wir das Skriptfeld in package.json konfigurieren

"Skripte": {
  "dev": "umgebungsübergreifende NODE_ENV=Entwicklung webpack-dev-server --config build/dev.config.js",
   "Build": "Umgebungsübergreifende NODE_ENV=Produktions-Webpack-Entwicklerserver --config Build/Build.config.js",
  "test": "echo \"Fehler: kein Test angegeben\" && exit 1"
}

Es ist zu beachten, dass wir Umgebungsvariablen plattformübergreifend über Cross-Env festlegen und verwenden können. Wir verwenden es, um festzulegen, ob es sich um Entwicklung oder Produktion handelt.

dev.config.js

Erstellen Sie eine neue dev.config.js im Build-Verzeichnis als Webpack-Konfigurationsdatei für dev

const webpack = erfordern('webpack')
const config = erfordern('./webpack.config.js')

// Variablen, die beginnend mit webpack4 config.mode = "development" konfiguriert werden müssen;

config.devServer = {
    historyApiFallback:true,
    // Der Hot-Parameter steuert, ob das Update die gesamte Seite aktualisiert oder nur eine Teilaktualisierung erfolgt. Hot: true,
    // Inline ist ein Hot-Update-Modus, der andere ist Iframe
    inline: wahr,
    Anschluss: 80
}

// Achten Sie darauf, HotModuleReplacementPlugin hinzuzufügen
config.plugins.push(
    neues webpack.HotModuleReplacementPlugin()
)

// Muss module.exports = config exportieren;

Beenden

Führen Sie npm run dev aus und ändern Sie main.vue. Der Browser muss nicht aktualisiert werden, webapck verpackt und aktualisiert es automatisch für uns.
Tatsächlich können Sie direkt bestimmen, ob im Konsolennetzwerk ein Hot-Reload gestartet werden soll

這里寫圖片描述

webpack-dev-server verwendet WebSocket, um Aktualisierungsinformationen an den Browser zu senden

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

Zusätzlich zur Verwendung von webpack-dev-server können wir auch webpack-dev-middleware + webpack-hot-middleware verwenden, um Hot Reload zu erreichen, aber keines dieser beiden Module verfügt über Serverfunktionen, wir müssen auch Express installieren

Paket.json

Ebenso müssen Sie nach der Installation aller Abhängigkeiten das Skriptfeld in package.json konfigurieren

"Skripte": {
  "dev": "cross-env NODE_ENV=Entwicklungsknoten ./build/dev.config.js",
  "Build": "Cross-Env NODE_ENV = Produktionsknoten ./Build/build.config.js",
  "test": "echo \"Fehler: kein Test angegeben\" && exit 1"
},

dev.config.js

Mit dieser Lösung muss dev.config.js mehr Code schreiben

const app = require('express')();
const webpack = erfordern("webpack");
const webpackDevMiddleware = erforderlich("webpack-dev-middleware");
const webpackHotMiddleware = erforderlich("webpack-hot-middleware");
const path = require("Pfad");
let config = require("./webpack.config")

config.mode = "Entwicklung";

// Sehr wichtig config.entry = [config.entry,'webpack-hot-middleware/client'];

config.plugins.push(
    neues webpack.HotModuleReplacementPlugin(),
    // Wenn HMR aktiviert ist, zeigt dieses Plugin den relativen Pfad des Moduls an. Es wird für die Entwicklungsumgebung empfohlen: new webpack.NamedModulesPlugin()
)

const compiler = webpack(konfiguration);

// Verwenden von Dev-Middleware und Hot-Middleware

const devMiddleware = webpackDevMiddleware(Compiler, {
    öffentlicher Pfad: config.output.publicPath,
    ruhig: stimmt
})

const hotMiddleware = webpackHotMiddleware(Compiler, {
    log: falsch,
    Herzschlag: 2000
})

app.use(devMiddleware);
app.use(hotMiddleware);
app.listen(80);

Im Gegensatz zu webpack-dev-server haben die beiden hier verwendeten Module keine Serverfunktionen. Daher können wir den Dienst nur mit Express starten.

Beenden

Führen Sie npm run dev aus und ändern Sie main.vue. Der Browser muss nicht aktualisiert werden, webapck verpackt und aktualisiert es automatisch für uns.
Sie können auch direkt bestimmen, ob Hot Reload im Konsolennetzwerk gestartet werden soll

這里寫圖片描述

In diesem Fall verwendet Webpack EventSource, um mit dem Browser zu kommunizieren. Im Gegensatz zur bidirektionalen Kommunikation von WebSocket kann EventSource nur vom Server zum Client kommunizieren.

Damit ist dieser Artikel über verschiedene Möglichkeiten zur manuellen Implementierung von HMR mit Webpack abgeschlossen. Weitere verwandte Webpack-HMR-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

Electron-vue verwendet Webpack, um mehrere Seiten mit Eingabedateien zu verpacken
So implementiert Webpack das Caching statischer Ressourcen
Zusammenfassung der mobilen Anpassungslösung von webpack
So verwenden Sie vue-cli, um ein Projekt zu erstellen und es mit webpack zu verpacken
Zusammenfassung der Lösung für den Webpack -v-Fehler von Vue

<<: Zusammenfassung der MySQL-Tabellen- und Spaltenkommentare

>>: Lösen Sie das Problem, dass VMware das 64-Bit-Betriebssystem in der Win10-Home-Version nicht installieren kann