webpack require.ensureとrequire AMDの違いを詳しく説明します。


概要
require-ensurerequire-amdの違い:
require-amd
説明:AMD仕様のrequire関数と同じです。使用時にモジュール配列とコールバック関数を伝達します。モジュールは全部ダウンロードされて、全部実行された後、コールバック関数を実行します。
文法:require(dependencies:String[],[calback:function])
パラメータ
  • dependencies:モジュール依存配列
  • calback:コールバック関数
  • require-ensure
    説明:require.ensureは必要な時に依存するモジュールをダウンロードします。パラメータ指定のモジュールは全部ダウンロードしました。(ダウンロードしたモジュールはまだ実行していません。)実行します。
    パラメータで指定されたコールバック関数です。require.ensureはchunkを作成し、このchunkの名前を指定できます。このchunk名が既に存在しているなら、今回依存したモジュールを既に存在しているchunkに統合して、最後にこのchunkはwebpack構築時に単独でファイルを生成します。
    文法:require.ensure(dependencies:String[],calback:function([require]),[chunkName:String])
  • dependencies:依存するモジュール配列
  • calback:コールバック関数は、呼び出し時にrequireパラメータ
  • を伝えます。
  • chunkName:モジュール名は、構築時にファイルを生成する際に
  • を使用して命名されます。
    注意点:requi.ensureのモジュールはダウンロードされても実行されません。レプリカ関数がrequire(モジュール名)を使用した場合にのみ、このモジュールは実行されます。

    require-amd
    ソースコード
    webpack.co.nfig.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");
    });
    module 1.js
    
    console.log("module1");
    module.exports = 1;
    module 2.js
    
    console.log("module2");
    module.exports = 2;  
    構築結果
    命令行でwebpack--config webpack.co nfig.amd.jsを実行します。
    -main.bundle.js
    -example.amd.js
    -1.hunnk.js
    -module 1.js
    -module 2.js
    実行結果
    ブラウザでamd/index.を実行し、コンソール出力:
    
    module1
    aaa
    module2
    bbb
    require-ensure
    ソースコード
    webpack.co nfig.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');
    module 1.js
    同上
    module 2.js
    同上
    構築結果
    命令行でwebpack--config webpack.co.nfig.ensure.jsを実行します。
    -main.bundle.js
    -example.amd.js
    -1.hunnk.js
    -module 1.js
    -module 2.js
    実行結果
    ブラウザでensure/index.を実行し、コンソール出力:
    aa
    module 2
    bb
    module 1
    require-ensure-chunk
    ソースコード
    webpack.co nfig.ensure.chunnk.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');
    
    module 1.js
    同上
    module 2.js
    同上
    構築結果
    命令行でwebpack--config webpack.co.nfig.ensure.jsを実行します。
    -main.bundle.js
    -example.amd.js
    -1.hunnk.js
    -module 1.js
    -module 2.js
    実行結果
    ブラウザでensure/index.を実行し、コンソール出力:
    aa
    module 1
    bb
    ccc
    1 module 2
    dd
    以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。