3

ビルドのパフォーマンスを最適化するために、2 つの個別の構成を使用してアプリをビルドしています。最初のバンドルはより頻繁に変更されるため、2 番目の大きなバンドルのコンテンツは再構築のプロセスを台無しにしません (それらは異なるバンドルですが、1 つの構成にあるためです)。 、最初の再構築のみのプロセスはまだ遅くなります)。

configs = [
{ 
   entry: {app: './app'},
   output: ...
   plugins: [
     new HtmlWebpackPlugin({..})
  ]
},
  // this is second rarely changed bundle
{
  entry: {big-bundle: './some/big'}.
  output: ...
}
]

index.html は 1 つしかないため、構成の 1 つにプラグインされます。問題は、big-bundleハッシュに応じて名前が可変である場合、HtmlWebpackPlugin を使用して、結果の HTML に参照を含める方法です。

実際、HtmlWebpackPlugin が提供するイベント フックを使用したソリューションのアイデアがいくつかあります。しかし、他のアドバイスがあるのだろうかと思います。

4

1 に答える 1

0

ファイルローダーを使用して正しい場所にロードし、require.context と組み合わせることを考えましたか?

require.context を使用してファイル名を正規表現と一致させ、ファイル ローダーを使用してファイルをコピーすることができます。

const context = require.context('./<the-files-directory>', false, /big-
bundle.*?\.js$/);
context.keys().forEach(key => context(key));

次に、ローダーを用意します。

{
  test: /big-bundle.*?\.js$/,
  loader: 'file!name=<name for index.html>'
}
于 2016-12-02T19:14:48.090 に答える