webpack2 CommonsChunkPluginマニフェストファイルで、唯一minChunksが機能

Question

WebPACKのバージョン

2.2.1

であれば、私は追加のmanifestファイルを追加しようとしている「名[]」配列の最後のファイルを生成しますオーダーwebpacksランタイムコードインジェクションの問題を回避し、キャッシュを有効にするには：

https://webpack.js.org/guides/code-splitting-libraries/#manifest-file

ただし、この場合には、minChunksに関数を渡すとき - 順番にすると、自動的にすべてのファイルを取得しますアレイ（マニフェスト、以下の例で）生成された唯一の最後のファイル： - vendor.jsチャンク内部node_modulesにあるその予期しない結果をもたらすであろう。

webpack.config.js出力

3つのファイルが予想

entry: { 
     bundle: "./src/index.tsx", 
    }, 
    output: { 
     filename: "[name].js?[chunkhash]", 
     path: `${projectRoot}/dist` 
    }, 
    plugins: [new webpack.optimize.CommonsChunkPlugin({ 
     names: ['vendor', 'manifest'], 
     minChunks: function (module) { 
      return module.context && module.context.indexOf('node_modules') !== -1; 
     } 
    })] 

：bundle.js、vendor.jsとmanifest.js

実際の出力

2ファイル：バンドル.js、manifest.js

Answer 1

Iは、上記の設定でのWebPACKのv2.2.1をことを観察しました最後の1つだけを作成します（つまり、あなたのケースではマニフェスト）まず、ベンダーを 'バンドル'バンドルとプロセスの親として考える...次に、マニフェストを前の処理を上書きする 'バンドル'バンドルとプロセスの親と考えます。最後に、バンドルを生成している間に、2つのバンドル、つまり「バンドル」バンドルとその親マニフェストバンドルを作成します。私はなぜそれがv2.2.1でこれのように振る舞うかわからない。あなたがここにこの

plugins: [new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     chunks: ["bundle"], //optional 
     minChunks: function (module) { 
      return module.context && module.context.indexOf('node_modules') !== -1; 
     } 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: "manifest", 
     chunks: ["vendor"], 
     minChunks: Infinity 
    })] 

トリックのようなあなたの設定を書きたいと思う

は、最初のプラグインのインスタンスと、あなたはベンダーのバンドルにnode_modulesからモジュールを抽出されるということです。これは親の共通バンドルなので、webpackはそのランタイムコードをベンダーバンドルに追加します（プラグインの2番目のインスタンスが追加されていない場合）。次にminChunksをInfinityとして使用してプラグインの2番目のインスタンスを適用すると、モジュールは抽出されませんが、マニフェストバンドルはベンダーの親バンドルとして作成されるため、webpackはそのランタイムコードをマニフェストバンドルに追加します。

マニフェストスクリプトが最初に実行され、次にベンダースクリプトと最後にスクリプトがバンドルされるようにする必要があります。つまり、予期しないエラーが発生しないように順次ロードします。