Create vendor chunks with scoped modules for webpack

webpack-vendor-scoping-chunks.js

/**
 * Given the package.json of a repo and the webpack externals, construct an object of
 * vendor chunks specifically for each scoped package (e.g. `@babel`)
 * @param {Array} externals the list of packages external to the webpack build
 * @param {Object} pkg the package.json for the current repository
 * @returns {Object} An object of the form:
 *
 * @example
 * ```javascript
 * {
 * babel:
 *  { test: /\/node_modules\/@babel\//,
 *    chunks: 'all',
 *    name: 'babel',
 *    priority: 0,
 *    enforce: true },
 * }
 * ```
 */
module.exports = (externals, pkg) => {
  // Get all the dependencies from the package.json file
  const cacheGroups = Object.keys(pkg.dependencies).reduce((groups, dependency) => {
    // Match any that have a scope associated with them (e.g. `@babel`)
    const [, scope] = dependency.match(/(@[\w-]+\/)?(.*)/);
    // If they have a scope and are not externalized from the bundle
    if (scope && !externals.includes(dependency)) {
      // Create the name without @ and /
      const chunkName = scope.replace('@', '').replace('/', '');

      // Create an object for the chunk
      if (!groups[chunkName]) {
        // eslint-disable-next-line no-param-reassign
        groups[chunkName] = {
          test: new RegExp(`/node_modules/${scope}`),
          chunks: 'all',
          priority: 0,
          enforce: true,
        };
      }
    }
    return groups;
  }, {});

  return cacheGroups;
};