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

Explanation: require.ensure only downloads dependent modules when needed. When all the modules specified by the parameters have been downloaded (the downloaded modules have not been executed yet), they will be executed

The callback function specified by the parameter. require.ensure will create a chunk, and you can specify the name of the chunk. If the chunk name already exists, the dependent modules will be merged into the existing chunk. Finally, this chunk will be generated separately when webpack is built. a file.

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

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

. Note: the requi.ensure module will only be downloaded and will not be executed. Only after the callback function uses require (module name), this The module will be executed.

Example

require-amd

Source code

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;

Build results

Run webpack --config webpack in the command line .config.amd.js

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

Run result

Run amd/index.html in the browser, the console output:

module1
aaa
module2
bbb

require-ensure

Source code

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

Same as above

module2.js

Same as above

Build result

Run webpack in the command line --config webpack.config.ensure.js

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

Running results

Run ensure/index.html in the browser, console output:

aaa

module2
bbb
module1

require-ensure-chunk

Source code

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

Same as above

module2.js

Same as above

Build results

Run webpack --config webpack in the command line .config.ensure.js

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

Run result

Run ensure/index.html in the browser, the console output:

aaa

module1
bbb
ccc
1module2
ddd

Related recommendations:

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!