4

そのため、webpack 2 に更新したばかりで、System.import 呼び出しを見て、webpack が自動的にチャンクを作成する最初の作業セットアップができました。かなり甘い！

ただし、ロード中に進行状況を表示できるように、最初のチャンクを ajax 呼び出しでロードします。

<script>だから私の質問は、タグでチャンクをロードする代わりに、イベントをリッスンできる ajax リクエストを使用するように、 System.import の機能を上書きまたは変更できますか?

4

1 に答える 1

5

残念ながら、そうではありません。webpack 2は、タグを使用するだけのSystem.import()通常のrequire.ensure()呼び出しに変換されます。<script>公式のWHATWG ローダー仕様でさえ、この種のイベント用の API を提供していません。この質問に対する問題を作成しました。

webpackについて: 独自に実装する方法がありますrequire.ensure()。ただし、チャンクの読み込みは webpack の不可欠な部分であるため、もう少し深く掘り下げる必要があります。これがあなたにとってどれほど重要かはわかりませんが、webpack 内でどのように動作するかに興味があるかもしれませんので、見てみましょう:

webpack では、すべての内部機能がプラグインとして実装されています。このようにして、webpack は多くの異なる機能と環境をサポートできます。したがって、webpack での実装方法に興味がある場合は、a) を参照するWebpackOptionsApplyか、b) 特定の文字列/コード スニペットを検索することをお勧めします。

target環境ごとに異なる実装が必要なため、チャンクの読み込みは指定された に大きく依存します。Webpack を使用すると、カスタム ターゲットを定義できます。文字列の代わりに関数を渡すと、webpack はcompilerインスタンスを使用して関数を呼び出します。そこで、必要なすべてのプラグインを適用できます。カスタム ターゲットはほとんどwebターゲットに似ているため、ターゲットからすべてのものをコピーするだけwebです。

// webpack.config.js

const NodeSourcePlugin = require("webpack/lib/node/NodeSourcePlugin");
const FunctionModulePlugin = require("webpack/lib/FunctionModulePlugin");
const LoaderTargetPlugin = require("webpack/lib/LoaderTargetPlugin");
const JsonpChunkTemplatePlugin = require("webpack/lib/JsonpChunkTemplatePlugin");
const JsonpHotUpdateChunkTemplatePlugin = require("webpack/lib/JsonpHotUpdateChunkTemplatePlugin");

function customTarget(compiler) {
    compiler.apply(
        new JsonpTemplatePlugin(compiler.options.output),
        new FunctionModulePlugin(compiler.options.output),
        new NodeSourcePlugin(compiler.options.node),
        new LoaderTargetPlugin("web")
    );
}

module.exports = {
    entry:  require.resolve("./app/main.js"),
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    target: customTarget
};

各プラグインを見ると、JsonpTemplatePluginがチャンクのロードを担当していることがわかります。それでは、それを独自の実装に置き換えましょう。私たちはそれを次のように呼びますXHRTemplatePlugin:

function customTarget(compiler) {
    compiler.apply(
        new XHRTemplatePlugin(compiler.options.output),
        new FunctionModulePlugin(compiler.options.output),
        new NodeSourcePlugin(compiler.options.node),
        new LoaderTargetPlugin("my-custom-target")
    );
}

XHRTemplatePluginメイン チャンク、各子チャンク、およびホット アップデートにコードを提供する責任があります。

function XHRTemplatePlugin() {}

XHRTemplatePlugin.prototype.apply = function (compiler) {
    compiler.plugin("this-compilation", function(compilation) {
        compilation.mainTemplate.apply(new XHRMainTemplatePlugin());
        compilation.chunkTemplate.apply(new XHRChunkTemplatePlugin());
        compilation.hotUpdateChunkTemplate.apply(new XHRHotUpdateChunkTemplatePlugin());
    });
};

JsonpChunkTemplatePluginおそらく、JsonpHotUpdateChunkTemplatePluginプラグインを再利用することもできますが、これはユースケース/実装によって異なります。

あなたのXHRMainTemplatePlugin今は次のように見えるかもしれません：

function XHRMainTemplatePlugin() {}

XHRMainTemplatePlugin.prototype.apply = function (mainTemplate) {
    mainTemplate.plugin("require-ensure", function(_, chunk, hash) {
        return this.asString([
            // Add your custom implementation here
            "fetch()"
        ]);
    });
};

この答えはすでに十分に長いと思うので、ここではこれ以上説明しません。ただし、実際の小さなサンプル プロジェクトを作成し、webpack によって作成された出力を確認することをお勧めします。内部の webpack プラグインは一見すると少し恐ろしく見えるかもしれませんが、ほとんどのプラグインは非常に短く、1 つのことしかできません。それらからインスピレーションを得ることもできます。

于 2016-06-15T12:42:22.103 に答える