ベンダースクリプトを個別にバンドルし、Webpack で必要に応じて要求するにはどうすればよいでしょうか? 質問する

Question

私のwebpack.config.js（バージョン1、2、3）ファイルには、

function isExternal(module) {
  var context = module.context;

  if (typeof context !== 'string') {
    return false;
  }

  return context.indexOf('node_modules') !== -1;
}

私のプラグイン配列で

plugins: [
  new CommonsChunkPlugin({
    name: 'vendors',
    minChunks: function(module) {
      return isExternal(module);
    }
  }),
  // Other plugins
]

これで、必要に応じてサードパーティのライブラリを 1 つのファイルのみに追加するファイルが作成されました。

ベンダーとエントリポイントファイルを分離する場所をより細かく設定したい場合は、次の手順を実行します。

plugins: [
  new CommonsChunkPlugin({
    name: 'common',
    minChunks: function(module, count) {
      return !isExternal(module) && count >= 2; // adjustable
    }
  }),
  new CommonsChunkPlugin({
    name: 'vendors',
    chunks: ['common'],
    // or if you have an key value object for your entries
    // chunks: Object.keys(entry).concat('common')
    minChunks: function(module) {
      return isExternal(module);
    }
  })
]

プラグインの順序は非常に重要であることに注意してください。

また、これはバージョン 4 で変更される予定です。公式になったら、この回答を更新します。

アップデート：Windows ユーザー向けの検索インデックスの変更

Answer 1