Méthode de remplacement du module à chaud (HMR)/mise à jour à chaud du Webpack

La fonction du remplacement de module à chaud (HMR) est de remplacer, ajouter et supprimer les modules nécessaires sans actualiser la page lorsque l'application est en cours d'exécution. Cet article présente principalement la méthode de remplacement de module à chaud (HMR)/mise à jour à chaud du webpack. est désormais partagé avec tous et sert de référence à tous.

Ceci est un article sur la configuration la plus simple du remplacement du module à chaud du webpack (réagir n'est pas requis), également appelé mise à jour à chaud.

La fonction de remplacement de module à chaud (HMR) consiste à remplacer, ajouter et supprimer les modules nécessaires sans actualiser la page pendant l'exécution de l'application. HMR est utile pour les applications constituées d’une seule arborescence d’états. Étant donné que les composants de ces applications sont « stupides » (par opposition à « intelligents »), après la modification du code du composant, l'état du composant peut toujours refléter correctement le dernier état de l'application.

webpack-dev-server a un "rechargement en direct" intégré et actualisera automatiquement la page.

Le répertoire des fichiers est le suivant :

1. app

1. a.js

2. component.js

3. index.js

2. node_modules

3. package.json

4. webpack.config.js

component.js importé a.js. index.js importe composant.js. La modification de n'importe quel fichier peut obtenir la fonction de mise à jour à chaud.

Le plus important est que dans index.js, il y a ce morceau de code : (obligatoire pour terminer la mise à jour à chaud)

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

Voici la configuration package.json :

{
 "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"
 }
}

Comme vous pouvez le voir sur les dépendances, c'est vraiment la configuration la plus simple. Parmi eux, nodemon est utilisé pour surveiller l'état du fichier webpack.config.js. Tant qu'il y a un changement, la commande sera réexécutée.

Concernant "html-webpack-plugin", il peut être omis ici. Pour une configuration spécifique, veuillez consulter : https://www.npmjs.com/package/html-webpack-plugin.

Ici, deux commandes sont définies, l'une est start, utilisée dans l'environnement de développement ; l'autre est build, utilisée dans l'environnement de production. --watch est utilisé pour surveiller un ou plusieurs fichiers, et --exec est utilisé par nodemon pour exécuter d'autres commandes. Pour une configuration spécifique, veuillez consulter : https://c9.io/remy/nodemon.

L'étape suivante est webpack.config.js Puisque deux commandes sont définies dans les scripts de package.json, nous devons encore implémenter deux situations (développement et production) dans le fichier de configuration. la configuration.

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;
};

Concernant Object.assign, le premier paramètre est l'objet cible, si l'attribut dans l'objet cible a la même clé, l'attribut sera attribué par la source Remplacements de propriété dans . De la même manière, les propriétés des sources ultérieures remplaceront les propriétés antérieures. Affectation superficielle, utilisez = pour la copie d'objet, c'est-à-dire la copie de référence.

Les paramètres env sont transmis via cli.

Ensuite, ouvrez la ligne de commande dans le répertoire actuel et exécutez npm start ou npm run build. Notez que le premier est dans l'environnement de développement et n'a pas de fichier de sortie (en mémoire). Ce n'est que lorsque le second est exécuté qu'il y aura un fichier de sortie.

Le code de la démo se trouve sur : https://github.com/yuwanlin/webpackHMR

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile dans le cadre du processus. avenir.

Articles connexes :

Partage des trois modes d'analyse d'ajax

Comparaison des trois implémentations d'analyse Ajax et JSON

Discutez de .get .post .ajax ztree et des connaissances associées sur le transfert de données par servlet en arrière-plan

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!