webpack require.ensure と require AMD の違いの詳細な説明

この記事では、webpack require.ensure と require AMD の違いについての詳細な説明を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

require-amd

説明: AMD 仕様の require 関数と同じで、モジュール配列とコールバック関数が渡されます。

構文: require( 依存関係: String[], [コールバック: function(...)])

パラメータ

1. 依存関係: モジュール依存関係配列

2. callback: コールバック関数

require- ensure

注: require.ensure は、必要な場合にのみ依存モジュールをダウンロードします。パラメーターで指定されたすべてのモジュールがダウンロードされると (ダウンロードされたモジュールはまだ実行されていません)、

パラメーターで指定されたコールバック関数が実行されます。 。 require.ensure はチャンクを作成し、チャンクの名前を指定できます。チャンク名がすでに存在する場合、依存するモジュールは、Webpack のビルド時に個別に生成されます。ファイル。

構文: require.ensure(dependency: String[], callback: function([require]), [chunkName: String])

1. dependency: 依存モジュールの配列

2. callback: コールバック関数、関数が呼び出されるときに、require パラメーターが渡されます

3. chunkName: モジュール名、構築中にファイルを生成するときに名前を付けるために使用されます

注: requi.e​​nsure モジュールはダウンロードされるだけで、実行されません。このモジュールのみが実行されます。コールバック関数が require(モジュール名) を使用するまで実行されません。

example

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

rrreええ

module1.js

require(["./module1"], function(module1) {
  console.log("aaa");
  var module2 = require("./module2");
  console.log("bbb");
});

module2.js

console.log("module1");
module.exports = 1;

ビルド結果

コマンドラインでwebpackを実行 --config webpack.config.amd.js
- main.bundle.js
- example.amd.js
- 1. chunk.js
- module1.js
- module2.js

実行結果

ブラウザでamd/index.htmlを実行し、コンソール出力:

console.log("module2");
module.exports = 2;

require-ensure

sourceコード

webpack.config.ensure.js

module1
aaa
module2
bbb

example.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"
  }
};

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

require.ensure(["./module1"], function(require) {
  console.log("aaa");
  var module2 = require("./module2");
  console.log("bbb");
  require("./module1");
}, 'test');

example.ensur.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"
  }
};

module1.js
上と同じ

module2.js
上と同じ

コマンドを実行行ウェブパック -- config webpack.config .ensure.js - main.bundle.js

- example.amd.js

- 1.chunk.js
- module1.js
- module2.js


ブラウザで ensure/index を実行します。 html、コンソール出力:

aaamodule1bbb

cccc

1Module2

ddd

関連する推奨事項:



Webpack、Babel、Reactに関する知識

ローダーとプラグインを理解する方法

Webpack 内

webpackでCSSをパッケージ化する方法

以上がwebpack require.ensure と require AMD の違いの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。