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 - module2.js

Laufergebnis

Amd/index.html im Browser ausführen, Konsolenausgabe:

module1
aaa
module2
bbb

require-ensure

Quellcode

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

example.ensure.js

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

module1.js

Gleiches wie oben

module2.js

Gleiches wie oben

Ergebnisse erstellen

Webpack in der Befehlszeile ausführen --config webpack.config.ensure.js

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

Laufergebnisse

im Browser: Führen Sie secure/index.html aus, Konsolenausgabe:

aaa

module2
bbb
module1

require-ensure- chunk

Quellcode

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

Gleiche wie oben

module2.js

Gleiche wie oben

Build-Ergebnis

Webpack über die Befehlszeile ausführen --config webpack.config.ensure.js

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

Laufendes Ergebnis

Run secure/index.html im Browser, Konsolenausgabe:

aaa

module1
bbb
ccc
1module2
ddd

Verwandte Empfehlungen:

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!