簡介

require-ensure和require-amd的區別：

require-amd

說明: 同AMD規范的require函數，使用時傳遞一個模塊數組和回調函數，模塊都被下載下來且都被執行后才執行回調函數

語法: require(dependencies: String[], [callback: function(...)])

參數

1. dependencies: 模塊依賴數組
2. callback: 回調函數

require-ensure

說明: require.ensure在需要的時候才下載依賴的模塊，當參數指定的模塊都下載下來了（下載下來的模塊還沒執行），便執行

參數指定的回調函數。require.ensure會創建一個chunk，且可以指定該chunk的名稱，如果這個chunk名已經存在了，則將本次依賴的模塊合并到已經存在的chunk中，最后這個chunk在webpack構建的時候會單獨生成一個文件。

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

1. dependencies: 依賴的模塊數組
2. callback: 回調函數，該函數調用時會傳一個require參數
3. chunkName: 模塊名，用于構建時生成文件時命名使用

注意點：requi.ensure的模塊只會被下載下來，不會被執行，只有在回調函數使用require(模塊名)后，這個模塊才會被執行。

示例

require-amd

源代碼

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;  

構建結果

命令行中運行webpack --config webpack.config.amd.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

運行結果

瀏覽器中運行amd/index.html，控制臺輸出：

module1aaamodule2bbb

require-ensure

源代碼

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
同上

module2.js
同上

構建結果

命令行中運行webpack --config webpack.config.ensure.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

運行結果

瀏覽器中運行ensure/index.html，控制臺輸出：

aaa
module2
bbb
module1

require-ensure-chunk

源代碼

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
同上

module2.js
同上

構建結果

命令行中運行webpack --config webpack.config.ensure.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

運行結果

瀏覽器中運行ensure/index.html，控制臺輸出：

aaa
module1
bbb
ccc
1module2
ddd

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。