Detailed explanation of the difference between webpack require.ensure and require AMD

This article mainly introduces the detailed explanation of the difference between webpack require.ensure and require AMD. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

require-amd

Description: Same as the require function of AMD specification. When used, a module array and callback function are passed. The modules are downloaded and all The callback function is executed only after it is executed

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

Parameters

1. dependencies: module dependency array

2. callback: callback function

##require-ensure

1. dependencies: Array of dependent modules

2. callback: callback function, a require parameter will be passed when the function is called

3. chunkName: module name, used for building When generating files, use

Example

require-amd

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

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

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

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

Build results

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

Run result

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

Same as above

Same as above

Build result

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

Running results

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

Same as above

Same as above

Build results

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

Run result

module1
bbb
ccc
1module2
ddd

Knowledge about Webpack, Babel and React

How to understand loader and plugin in webpack

How to use webpack to package css

The above is the detailed content of Detailed explanation of the difference between webpack require.ensure and require AMD. For more information, please follow other related articles on the PHP Chinese website!