Webpack4 splitChunks の対象を一部に絞る

webpack4で新たに追加されたoptimization.splitChunksの基本的な使い方はこちらの記事に譲るとして、
splitChunksの細かいところについて。

よくある書き方

module.exports = {
  ...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /node_modules/,
          name: 'vendor',
          chunks: 'initial',
        }
      }
    }
  }
};

こうすることでnode_modules配下をvendor.bundle.jsというかたちで分けることができる。

対象を絞る

const moduleList = ["@babel/polyfill", "react", "react-dom"];

module.exports = {
  ...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: new RegExp(
            `[\\/]node_modules[\\/](${moduleList.join("|")})[\\/]`
          ),
          name: 'vendor',
          chunks: 'initial',
        }
      }
    }
  }
};

こうすることで、splitしたいmoduleを一部に絞ることができる。