Webpack: difference between require. ensure and require AMD, require. ensure

Webpack: difference between require. ensure and require AMD, require. ensure
Introduction

Difference between require-ensure and require-amd:

• Require-amd
  
  • Note: similar to AMD's require function, a module array and callback function are transmitted during use. The callback function is executed only after the modules are downloaded and executed.
  • Syntax:require(dependencies: String[], [callback: function(...)])
  • Parameters
    
    • Dependencies: array of module dependencies
    • Callback: callback function
• Require-ensure
  
  • Description: require. ensure downloads the dependent module only when needed. When all the modules specified by the parameter are downloaded (the downloaded module has not been executed), the callback function specified by the parameter is executed. Require. ensure creates a chunk and can specify the chunk name. If the chunk name already exists, merge the dependent modules into the existing chunk, finally, this chunk will generate a separate file during webpack construction.
  • Syntax:require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])
    
    • Dependencies: array of dependent modules
    • Callback: callback function. A require parameter is passed during the function call.
    • ChunkName: Module name, used for naming when a file is generated during build
  • Note: The requi. ensure module will only be downloaded and not executed. This module will only be executed after the callback function uses require (Module name.

Sample 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 result

Run in command linewebpack --config webpack.config.amd.js
-Main. bundle. js
-Example. amd. js
-1. chunk. js
-Module1.js
-Module2.js

Running result

Run amd/index.html in the browser. The console outputs:

module1aaamodule2bbb

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 in command linewebpack --config webpack.config.ensure.js
-Main. bundle. js
-Example. amd. js
-1. chunk. js
-Module1.js
-Module2.js

Running result

Run ensure/index.html in the browser. The console outputs:

aaamodule2bbbmodule1

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 result

Run in command linewebpack --config webpack.config.ensure.js
-Main. bundle. js
-Example. amd. js
-1. chunk. js
-Module1.js
-Module2.js

Running result

Run ensure/index.html in the browser. The console outputs:

aaamodule1bbbccc1module2ddd

Source code

Webpack-module-require

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.