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

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.