HOWTO control webpack4 bundle chunks

Question

What seems simple is not clicking for me... I'm trying to create three separate bundles:

(1) node-vendors-[hash].bundle.js: bundle of stuff from node_modules (2) vendor-config-[hash].bundle.js: bundle of all scripts provided by vendors we use our site with config stuff... think multiple services like Google Analytics; each vendor we use on our site provides a snippet with account details (3) our custom script

No matter the config, I keep getting a bundle for each source file in the #2 category above.

const coreVendorSetupFiles = {
  vendor1: './scripts/vendors/vendor1/index.js',
  vendor2: './scripts/vendors/vendor2/index.js',
  vendor3: './scripts/vendors/vendor3/index.js',
  vendor4: './scripts/vendors/vendor4/index.js',
  ourCode: './scripts/ours/index.ts
};

module.exports = {
  entry: coreVendorSetupFiles,
  module: {
    rules: [
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendorConfig: {
          test: /[\\/]vendors[\\/]/,
          name: 'vendor-config'
        }
      }
    }
  },
  output: {
    path: path.resolve(__dirname, './../dist'),
    filename: '[name].bundle-[hash].js'
  }
};

What I get every time are 6 bundles... a single one for #1 & #3 above, but 4 additional ones for each script referenced in the "vendors" folder. I know my optimization section is incorrect, but no matter what I change I can't get this working. After search and trying tons of examples, posting in desperation :/

are your vendors imported somewhere in your dependency tree starting from index.ts? — PlayMa256, Oct 11 '18 at 12:22
They aren’t imported by anything. My goal is to simply combine the four of those files in /vendors/ in a single bundle. Instead they are each going in their own bundle. — Andrew Connell, Oct 11 '18 at 12:25
I think I see the problem... by listing each one in the entries, webpack is creating a bundle for each entry file. Instead, I should have a single file that imports them all... now I'm seeing desired results... — Andrew Connell, Oct 11 '18 at 12:37
Yeah, exactly. When having an object on the entry point, webpack treats them as different chunks — PlayMa256, Oct 11 '18 at 12:38

score 1 · Accepted Answer · answered Oct 13 '18 at 19:16

You can't setup chunks through entry points. Entry points used to avoid duplicated load. There it seems you have only one entry point: ./scripts/ours/index.ts

To split vendors.js use cacheGroups, here you will have such many chunks as npm pakets you have.

 cacheGroups: {
   vendor: {
     test: /[\\/]node_modules[\\/]/,
     vendorname(v) {
       var name = v.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
       return `npm.${name.replace('@', '_')}`;
     },
   },

HOWTO control webpack4 bundle chunks

1 Answers1