Webpack Hot Module Replacement (HMR)/Hot-Update-Methode

Die Funktion des Modul-Hot-Modul-Austauschs (HMR) besteht darin, erforderliche Module zu ersetzen, hinzuzufügen und zu löschen, ohne die Seite zu aktualisieren, wenn die Anwendung ausgeführt wird. In diesem Artikel wird hauptsächlich die Methode zum Hot-Modul-Austausch (HMR)/Hot-Update des Webpacks vorgestellt wird nun mit allen geteilt und dient als Referenz für alle.

Dies ist ein Artikel über die einfachste Konfiguration des Webpack-Hot-Modul-Ersatzes (Reaktion ist nicht erforderlich), auch Hot-Update genannt.

Die Funktion des Hot Module Replacement (HMR) besteht darin, erforderliche Module zu ersetzen, hinzuzufügen und zu löschen, ohne die Seite zu aktualisieren, während die Anwendung ausgeführt wird. HMR ist für Anwendungen nützlich, die aus einem einzelnen Zustandsbaum bestehen. Da die Komponenten dieser Anwendungen „dumm“ (im Gegensatz zu „intelligent“) sind, kann der Status der Komponente nach Änderungen am Code der Komponente immer noch korrekt den neuesten Status der Anwendung widerspiegeln.

webpack-dev-server verfügt über ein integriertes „Live-Reload“ und aktualisiert die Seite automatisch.

Das Dateiverzeichnis lautet wie folgt:

1. app

1. a.js

2. component.js

3. index.js

2. node_modules

3. package.json

4. webpack.config.js

component.js importiert a.js. index.js importiert Component.js. Durch Ändern einer beliebigen Datei kann die Hot-Update-Funktion erreicht werden.

Das Wichtigste ist, dass es in index.js einen solchen Code gibt: (erforderlich, um das Hot-Update abzuschließen)

if(module.hot){
  module.hot.accept(moduleId, callback);
}

Das Folgende ist die package.json-Konfiguration:

{
 "name": "webpack-hmr",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "start": "nodemon --watch webpack.config.js --exec \"webpack-dev-server --env development\"",
  "build": "webpack --env production"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "html-webpack-plugin": "^2.28.0",
  "nodemon": "^1.11.0",
  "webpack": "^2.2.1",
  "webpack-dev-server": "^2.4.1"
 }
}

Wie Sie an den Abhängigkeiten sehen können, ist dies wirklich die einfachste Konfiguration. Unter anderem wird nodemon verwendet, um den Status der Datei webpack.config.js zu überwachen. Solange eine Änderung vorliegt, wird der Befehl erneut ausgeführt.

Bezüglich „html-webpack-plugin“ kann es hier weggelassen werden. Informationen zur spezifischen Konfiguration finden Sie unter: https://www.npmjs.com/package/html-webpack-plugin.

Hier werden zwei Befehle definiert, einer ist „Start“, der in der Entwicklungsumgebung verwendet wird, der andere ist „Build“, der in der Produktionsumgebung verwendet wird. --watch wird verwendet, um eine oder mehrere Dateien zu überwachen, und --exec wird von nodemon verwendet, um andere Befehle auszuführen. Informationen zur spezifischen Konfiguration finden Sie unter: https://c9.io/remy/nodemon.

Der nächste Schritt ist webpack.config.js. Da in den Skripten von package.json zwei Befehle definiert sind, müssen wir noch zwei Situationen (Entwicklung und Produktion) in der Konfigurationsdatei implementieren die Konfiguration.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

const PATHS = {
 app: path.join(__dirname, 'app'),
 build: path.join(__dirname, 'build'),
};

const commonConfig={
 entry: {
  app: PATHS.app + '/index.js',
 },
 output: {
  path: PATHS.build,
  filename: '[name].js',
 },
 watch: true,
 plugins: [
  new HtmlWebpackPlugin({
   title: 'Webpack demo',
  }),
 ],
}

function developmentConfig(){
 const config ={
  devServer:{
   historyApiFallback:true, //404s fallback to ./index.html
   // hotOnly:true, 使用hotOnly和hot都可以
   hot: true,
   stats:'errors-only', //只在发生错误时输出
   // host:process.env.Host, 这里是undefined，参考的别人文章有这个
   // port:process.env.PORT, 这里是undefined，参考的别人文章有这个
   overlay:{ //当有编译错误或者警告的时候显示一个全屏overlay
    errors:true,
    warnings:true,
   }
  },
   plugins: [
   new webpack.HotModuleReplacementPlugin(),
   new webpack.NamedModulesPlugin(), // 更新组件时在控制台输出组件的路径而不是数字ID，用在开发模式
   // new webpack.HashedModuleIdsPlugin(), // 用在生产模式
  ],
 };
 return Object.assign( 
  {},
  commonConfig,
  config,
  {
   plugins: commonConfig.plugins.concat(config.plugins),
  }
 );
}

module.exports = function(env){
 console.log("env",env);
 if(env=='development'){
  return developmentConfig();
 }
 return commonConfig;
};

In Bezug auf Object.assign ist der erste Parameter das Zielobjekt. Wenn das Attribut im Zielobjekt denselben Schlüssel hat, wird das Attribut von zugewiesen diejenige in der Quelleigenschaftsüberschreibung. Eigenschaften späterer Quellen überschreiben ebenfalls frühere Eigenschaften. Flache Zuweisung, verwenden Sie = zum Kopieren von Objekten, dh zum Kopieren von Referenzen.

env-Parameter werden über cli übergeben.

Öffnen Sie dann die Befehlszeile für das aktuelle Verzeichnis und führen Sie npm start oder npm run build aus. Beachten Sie, dass sich Ersteres in der Entwicklungsumgebung befindet und keine Ausgabedatei (im Speicher) hat. Erst wenn Letzteres ausgeführt wird, gibt es eine Ausgabedatei.

Der Code der Demo ist unter: https://github.com/yuwanlin/webpackHMR

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen dabei helfen Zukunft.

Verwandte Artikel:

Teilen der drei Parsing-Modi von Ajax

Vergleich der drei Implementierungen von Ajax- und JSON-Parsing

Diskutieren Sie .get .post .ajax ztree und das damit verbundene Wissen über die Datenübertragung im Hintergrund von Servlets

Das obige ist der detaillierte Inhalt vonWebpack Hot Module Replacement (HMR)/Hot-Update-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!