Detailed explanation of the difference between webpack require.ensure and require AMD_javascript skills

This article mainly introduces the detailed explanationwebpack The difference between require.ensure and require AMD. The editor thinks it is quite good and will also be used as a reference for everyone. If you are interested in webpack, you can follow the editor to take a look.

Introduction

The difference between require-ensure and require-amd:

require-amd

Description: Same as the require function of AMD specification. When used, a module array and callback function are passed. The callback function is executed only after the modules have been downloaded and 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 result

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

##module1.js

module2.js

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

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

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

aaa

bbb
module1


##require-ensure-chunk

Source code

##

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

Run webpack in the command line --config webpack.config.ensure.js - main.bundle.js - example.amd.js

- module1.js
- module2.js


Running result

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

bbb

1module2
ddd


The above is I hope that the entire content of this article will be helpful to everyone's learning, and I also hope that everyone will support the PHP Chinese website.

Related recommendations:

Detailed explanation of vue loading components on demand webpack require.ensure

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

Webpack learning tutorial front-end performance optimization summary

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