Ausführliche Erläuterung der Verwendung des Webpack-Hot-Modul-Ersatzes

Dieses Mal werde ich Ihnen die Verwendung des Webpack-Hot-Modul-Ersatzes ausführlich erläutern. Was sind die Vorsichtsmaßnahmen beim Webpack-Hot-Modul-Ersatz?

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. In diesem Artikel wird hauptsächlich der Webpack Hot Module Replacement (HMR) vorgestellt Die Hot-Update-Methode ist recht gut, daher möchte ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf

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 diesen 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 man anhand der Abhängigkeiten erkennen kann, 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 können Sie auch die Konfiguration eines davon ändern).

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 die Eigenschaften im Zielobjekt denselben Schlüssel haben, werden die Eigenschaften durch die Eigenschaften in der Quelle überschrieben. 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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So wählen Sie die jQuery-Version aus

Detaillierte Erklärung zur Verwendung von Mint-UI in Vue

Bildlaufleiste der JS-Erfassungsseite

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung des Webpack-Hot-Modul-Ersatzes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!