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.