Explication détaillée de la différence entre webpack require.ensure et require AMD

Cet article présente principalement l'explication détaillée de la différence entre webpack require.ensure et require AMD. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

require-amd

Description : Identique à la fonction require de la spécification AMD Lorsqu'elle est utilisée, un tableau de modules et une fonction de rappel sont transmis. téléchargé et tout La fonction de rappel

n'est exécutée qu'après son exécution. Syntaxe : require(dependencies: String[], [callback: function(...)])

.

Paramètres

1. dépendances : tableau de dépendances du module

2. rappel : fonction de rappel

require-ensure

Explication : require.ensure télécharge uniquement les modules dépendants en cas de besoin Lorsque tous les modules spécifiés par les paramètres ont été téléchargés (les modules téléchargés n'ont pas encore été exécutés). ,

La fonction de rappel spécifiée par le paramètre. require.ensure créera un morceau et vous pourrez spécifier le nom du morceau si le nom du morceau existe déjà, les modules dépendants seront fusionnés dans le morceau existant. Enfin, ce morceau sera généré séparément lors de la construction d'un webpack. déposer.

Syntaxe : require.ensure(dependencies : String[], callback: function([require]), [chunkName: String])

1. dépendances : Tableau de modules dépendants

2. callback : fonction de rappel, un paramètre require sera transmis lors de l'appel

3. chunkName : nom du module, utilisé pour la construction. Lors de la génération de fichiers, utilisez

Remarque : le module requi.ensure ne sera téléchargé et ne sera pas exécuté seulement après que la fonction de rappel utilise require (nom du module), ce module. sera exécuté.

Exemple

require-amd

Code source

webpack.config.amd .js

var path = require("path");
module.exports = {
  entry: "./example.amd.js",
  output: {
    path: path.join(__dirname, "amd"),
    filename: "[name].bundle.js",
    chunkFilename: "[id].chunk.js"
  }
};

exemple.amd.js

require(["./module1"], function(module1) {
  console.log("aaa");
  var module2 = require("./module2");
  console.log("bbb");
});

module1.js

console.log("module1");
module.exports = 1;

module2.js

console.log("module2");
module.exports = 2;

Résultat de construction

commande Exécutez webpack dans la ligne --config webpack.config.amd.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

Résultat d'exécution

Exécutez amd/index.html dans le navigateur, sortie de la console :

module1
aaa
module2
bbb

exiger-assurer

Code source

webpack.config.ensure.js

var path = require("path");
module.exports = {
  entry: "./example.ensure.js",
  output: {
    path: path.join(__dirname, "ensure"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  }
};

exemple.ensure.js

require.ensure(["./module1"], function(require) {
  console.log("aaa");
  var module2 = require("./module2");
  console.log("bbb");
  require("./module1");
}, 'test');

module1.js
Idem que ci-dessus

module2.js
Idem comme ci-dessus

Résultats de construction

Exécutez webpack dans la ligne de commande --config webpack.config.ensure.js
- main.bundle.js
- exemple .amd.js
- 1.chunk.js
- module1.js
- module2.js

Résultats en cours d'exécution

dans le navigateur Exécutez Ensure/index.html, sortie de la console :

aaa
module2
bbb
module1

require-ensure- chunk

Code source

webpack.config.ensure.chunk.js

var path = require("path");
module.exports = {
  entry: "./example.ensur.chunk.js",
  output: {
    path: path.join(__dirname, "ensure-chunk"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  }
};

example.ensur.chunk .js

require.ensure(["./module1"], function(require) {
  console.log("aaa");
  require("./module1");
  console.log("bbb");
}, 'common');

require.ensure(["./module2"], function(require) {
  console.log("ccc");
  require("./module2");
  console.log("ddd");
}, 'common');

module1.js
Idem que ci-dessus

module2.js
Idem que ci-dessus

Résultat de construction

Exécutez webpack à partir de la ligne de commande --config webpack.config.ensure.js
- main.bundle.js
- example.amd. js
- 1.chunk. js
- module1.js
- module2.js

Résultat d'exécution

Exécuter Ensure/index.html dans le navigateur, sortie de la console :

aaa
module1
bbb
ccc
1module2
ddd

Recommandations associées :

Connaissance de Webpack, Babel et React

Comment comprendre le chargeur et le plugin dans webpack

Comment utiliser webpack pour empaqueter les CSS

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!