ホームページ > 記事 > ウェブフロントエンド > webpack require.ensure と require AMD の違いの詳細な説明
この記事では、webpack require.ensure と require AMD の違いについての詳細な説明を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
require-amd
説明: AMD 仕様の require 関数と同じで、モジュール配列とコールバック関数が渡されます。
構文: require( 依存関係: String[], [コールバック: function(...)])
パラメータ
依存関係: モジュール依存関係配列
callback: コールバック関数
require- ensure
注: require.ensure は、必要な場合にのみ依存モジュールをダウンロードします。パラメーターで指定されたすべてのモジュールがダウンロードされると (ダウンロードされたモジュールはまだ実行されていません)、
パラメーターで指定されたコールバック関数が実行されます。 。 require.ensure はチャンクを作成し、チャンクの名前を指定できます。チャンク名がすでに存在する場合、依存するモジュールは、Webpack のビルド時に個別に生成されます。ファイル。
構文: require.ensure(dependency: String[], callback: function([require]), [chunkName: String])
dependency: 依存モジュールの配列
callback: コールバック関数、関数が呼び出されるときに、require パラメーターが渡されます
chunkName: モジュール名、構築中にファイルを生成するときに名前を付けるために使用されます
注: requi.ensure モジュールはダウンロードされるだけで、実行されません。このモジュールのみが実行されます。コールバック関数が 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
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
cccc1Module2
ddd
関連する推奨事項:
Webpack、Babel、Reactに関する知識
以上がwebpack require.ensure と require AMD の違いの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。