In webpack can I only use commonchunks plugin in one entry bundle

Question

I have an app with 2 bundles, and common modules e.g. react are extracted into a vendor bundle. I am adding a 3rd bundle which I don't want to extract common dependancies from. Is this possible.

This question is related to this one however that is about creating multiple vendor bundles for each entry point, whereas I want one of the bundles to not require vendor. In my case it is because the script is a simple site verification script which is being set in the head, so will be before the vendor bundlde. However I still want to be able to use modules in this head bundle.

const webpack = require('webpack');
const path = require('path');

const config = {
  entry: {
    vendor: [
      'jquery',
      'react',
      'react-dom'
    ],
    main: [
      './bundles/main/App',
    ],
    cms: [
      './bundles/cms/App'
    ],
    head: [
      './bundles/head/App'
    ],
  },
  output: {
    filename: '[name]-bundle.js',
    path: '../app/assets/webpack',
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor-bundle.js',
      minChunks: Infinity,
    })
  ],
  module: {
    loaders: [
      {test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/},
    ],
  },
};

module.exports = config;

score 0 · Answer 1 · answered Feb 16 '17 at 04:08

It seems the similar question on code splitting multiple bundles did actually help answer my question. In particular Michael Margiel's answer having multiple vendor bundles specified with multiple CommonsChunkPlugins which I think is the cleanest approach.

Having entry specific vendor chunks using CommonsChunkPlugins multiple times:

new webpack.optimize.CommonsChunkPlugin("vendor-page1", "vendor-page1.js", Infinity),
new webpack.optimize.CommonsChunkPlugin("vendor-page2", "vendor-page2.js", Infinity)

And then declare different extenral libraries for different files:

entry: {
    page1: ['entry.js'],
    page2: ['entry2.js'],
    "vendor-page1": [
        'lodash'
    ],
    "vendor-page2": [
        'jquery',
        'react'
    ]
},

This enabled me to have the bundle without any vendor includes without needing any additional steps, however I could have a vendor for that 3rd bundle if I wanted, down the track.

My config in the end looked like this:

const webpack = require('webpack');
const path = require('path');

const config = {
  entry: {
    head: ['./bundles/head/App'],
    main: ['./bundles/main/App'],
    cms: ['./bundles/cms/App'],
    'vendor': [
      'babel-polyfill',
      'jquery',
      'react'
    ],
    'vendor-cms': [
      'jquery'
    ]
  },
  output: {
    filename: '[name]-bundle.js',
    path: '../app/assets/webpack',
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor-bundle.js',
      chunks: ['main'],
      minChunks: Infinity,
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor-cms',
      filename: 'vendor-cms-bundle.js',
      chunks: ['cms'],
      minChunks: Infinity,
    }),
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify(nodeEnv)},
    }),
  ],
  module: {
    loaders: [
      {test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/},
    ],
  },
};

module.exports = config;

In webpack can I only use commonchunks plugin in one entry bundle

1 Answers1