Detaillierte Erläuterung des Unterschieds zwischen Webpack require.ensure und require AMD

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung des Unterschieds zwischen Webpack require.ensure und require AMD vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

require-amd

Beschreibung: Identisch mit der Anforderungsfunktion der AMD-Spezifikation. Bei Verwendung werden ein Modularray und eine Rückruffunktion übergeben heruntergeladen und alle Die Rückruffunktion

wird erst ausgeführt, nachdem sie ausgeführt wurde. Syntax: require(dependencies: String[], [callback: function(...)])

Parameter

1. Abhängigkeiten: Modulabhängigkeitsarray

2. Rückruf: Rückruffunktion

require-ensure

Erklärung: require.ensure lädt abhängige Module nur herunter, wenn sie benötigt werden. Wenn alle durch die Parameter angegebenen Module heruntergeladen wurden (die heruntergeladenen Module wurden noch nicht ausgeführt). ,

Die durch den Parameter angegebene Rückruffunktion. require.ensure erstellt einen Block, und Sie können den Namen des Blocks angeben. Wenn der Blockname bereits vorhanden ist, werden die abhängigen Module beim Erstellen des Webpacks separat generiert Datei.

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

1. dependencies: Array abhängiger Module

2. Callback: Callback-Funktion, beim Aufruf wird ein erforderlicher Parameter übergeben

3. chunkName: Modulname, der zum Erstellen verwendet wird Verwenden Sie beim Generieren von Dateien

Hinweis: Das requi.ensure-Modul wird nur heruntergeladen und nicht ausgeführt. Erst nachdem die Rückruffunktion require (Modulname) verwendet, wird dieses Modul verwendet wird ausgeführt.

Beispiel

require-amd

Quellcode

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

example.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;

Ergebnis erstellen

Befehl Führen Sie webpack in der Zeile --config webpack.config.amd.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js < aus 🎜 >- module2.js

Laufergebnis

module1
aaa
module2
bbb

require-ensure

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

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

Gleiches wie oben

Gleiches wie oben

Ergebnisse erstellen

- main.bundle.js
- Beispiel .amd.js
- 1.chunk.js
- module1.js
- module2.js

Laufergebnisse

module2
bbb
module1

require-ensure- chunk

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

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');

Gleiche wie oben

Gleiche wie oben

Build-Ergebnis

- main.bundle.js
- example.amd. js
- 1.chunk. js
- module1.js
- module2.js

Laufendes Ergebnis

module1
bbb
ccc
1module2
ddd

Wissen über Webpack, Babel und React

Wie man Loader und Plugin im Webpack versteht

Wie man es verwendet Webpack zum Paketieren von CSS

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Unterschieds zwischen Webpack require.ensure und require AMD. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!