So verwenden Sie den Webpack-Hot-Modul-Ersatz

Dieses Mal zeige ich Ihnen, wie Sie den Webpack-Hot-Modul-Austausch verwenden und welche Vorsichtsmaßnahmen für den Webpack-Hot-Modul-Austausch gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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 man anhand der Abhängigkeiten sehen 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 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 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.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie js+css, um einen Tippeffekt zu erzielen

So verwenden Sie den Webpack-Quellcode Lademechanismus

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Webpack-Hot-Modul-Ersatz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!