首頁  >  文章  >  web前端  >  webpack require.ensure與require AMD的差異詳解

webpack require.ensure與require AMD的差異詳解

小云云
小云云原創
2017-12-14 09:34:571584瀏覽

本文主要介紹了詳解webpack 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.e​​nsure的模組只會被下載下來,不會被執行,只有在回呼函數使用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,控制台輸出:


module1
aaa
module2
bbb

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

bbbccc 1module2

ddd

相關推薦:

##########關於Webpack, Babel 與React的知識########## ##如何理解webpack中loader和plugin############如何用webpack進行css的打包#######

以上是webpack require.ensure與require AMD的差異詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn