問題タブ [commonschunkplugin]

デフォルトのビルド設定では、(X+A)、(Y+A+B)、(Z+B) のビルド レイヤーを取得します。

欲しいもの: (X+A), (Y+A), Z, B

B は、Y および Z モジュールを要求するときに 1 回だけロードする必要があります。

は見つかりましCommonsChunkPluginたが、正しく構成できません。

私は、babel を使用してコードを作成し、反応する必要があるアプリケーションを持っています。アプリケーションは、自動ビルドの作成とデプロイのために gulp と webpack を使用してビルドされます。gulp と webpack を使用して babel+react コードをブラウザーで解釈可能なコードに変換する場合、npm を使用して react をインストールし、すべてのファイルにインポートする必要があります。サンプル コードは次のとおりです。

さて、問題はこのコードが webpack にバンドルされている場合、react および react-dom ライブラリ コードをバンドルされたファイルにバンドルすることです。したがって、これらのライブラリ ファイルをキャッシュして別のビューにロードすることはできません。このため、同じライブラリ コードが別のバンドル ファイルに何度も読み込まれます。バンドルされたファイルではなく、これらのファイルを個別にロードする方法はありますか?

ベンダー コードを 2 つのチャンクに分割したいと思います。1 つはすべての angular ライブラリを含み、もう 1 つはその他すべてを含みます。

私のAngularアプリには単一のエントリポイントがあり、次のようにセットアップされています:

次に、CommonsChunkPlugin を使用して、他の 2 つのバンドルを構成します。

これにより、次の 3 つのファイルが生成されます。

app.bundle.js には、私のアプリ コードだけが含まれています。
vendor.bundle.jsには、角度のあるものを除くすべてのサードパーティのライブラリが
含まれています。

他のサードパーティのライブラリを自動的に含めずに、角度モジュールのみを vendor.angular.bundle.js にバンドルする方法はありますか?

私はWebpack に関する Maxime Fabre のチュートリアルに従っており、1 つのエントリ ポイントと 2 つのチャンクを使用して機能する非常に単純な Webpack バンドルを取得しようとしています。どちらのチャンクにも jquery と mustache が必要なので、チュートリアルと同様に CommonsChunkPlugin を使用して、共通の依存関係をメイン バンドル ファイルに移動します。また、extract-text-webpack-pluginを使用して、チャンクからスタイルを抽出し、別の CSS ファイルに配置しています。

私のwebpack.config.js:

エントリ ポイントの関連コード (私は ES6 構文とバベルを使用しています):

チャンク 1 とチャンク 2 はどちらも次のようになります。

index.html:

バンドルを実行するとwebpack、問題なくビルドされます。ただし、ブラウザーでは が表示され、Uncaught TypeError: Cannot read property 'call' of undefinedよく調べてみると、いくつかのモジュールundefinedが最終的なバンドルのようになっているように見えます。

私のバグはhttps://github.com/wenbing/webpack-extract-text-commons-chunk-bugによく似ています。extract-text-webpack-plugin または CommonsChunkPlugin を無効にしてビルドすると、webpack バンドルが美しく機能します。

ただし、2 つの非常に一般的なプラグインを使用した簡単なチュートリアルに従っているにもかかわらず、バグはまれであるように思われるため、どこかで失敗していると思います。何を与える？

私はかなり長い間 Webpack を学んでいますが、奇妙な動作に遭遇しました。

angular.io のWebpack Introduction で説明されているように、 すべてのベンダー モジュールをvendor.ts-file にインポートし、すべてのポリフィルを -file にインポートし、polyfill.ts-file 内でアプリを初期化していますmain.ts。したがって、Webpack の構成に次のエントリ ポイントと CommonsChunkPlugin を追加しました。

したがって、Webpack はそれを認識しvendor.ts、app.ts共通のモジュールを使用して、それをvendor.js-file のみに追加する必要があります。-file は次のvendor.tsようになります。

残念ながら、この動作は、 経由でインポートしたすべてのモジュールで期待どおりに機能しますが、 経由import MODULEでインポートしたモジュールでは機能しませんimport * as ALIAS from MODULE。この例では、 -fileとの依存関係も共有する必要がありますが、 -module もそこにインポートするため、そこにwebfontloader書き込まれます。app.jsvendor.ts

私が変更import * as WebFont from 'webfontloader';すると、let WebFont = require('webfontloader');それは機能します。

どうしたの？それでは、角度のすべてのインポートが機能するのはなぜですか?

を使用してモジュールを動的にロードrequire.ensure()すると、webpack は依存関係を分析してチャンクしないことに気付きました。これは、そのようなモジュールが転送されたかどうかを webpack が知ることができないと主張できる何らかの方法で理にかなっていますが、とにかく webpack にその仕事を強制することはできますか?

例は次のとおりです。

app.js :

module1.js

module2.js

このコンパイルの結果、これらのモジュールは両方とも socket-io ライブラリ全体をそれぞれのチャンクに「リンク」します。私の当初の期待は、CommonsChunkPluginがそれらをキャッチrequiresし、その大きなライブラリを共通のチャンクに入れることでした。

ただし、機能しません。もちろん、この依存関係を手動でいつでも「解決」することはできますが、webpack が何らかの方法でそのトリックを実行できることを願っていましたか?