Comment Webpack implémente le remplacement de module à chaud

Cette fois, je vais vous montrer comment webpack implémente le remplacement de module à chaud, et quelles sont les précautions pour que webpack implémente le remplacement de module à chaud. Voici un cas pratique, jetons un coup d'œil.

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.

La chose la plus importante 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);
}

Ce qui suit est 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 , vous pouvez également modifier la configuration de l'un d'eux).

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 les propriétés de l'objet cible ont la même clé, les propriétés seront écrasées par les propriétés de la source. 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

référence copie.

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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes d'utilisation de Mint-UI

Quels attributs JS possède-t-il pour déterminer s'il existe y a-t-il une barre de défilement sur la page ?

Six algorithmes de tri JS couramment utilisés et comparaison

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!