Webpack Vendor Chunk Plugin

1.0.0 verified Sat Apr 25 auth: no javascript deprecated

A webpack plugin (v1.0.0) that removes the runtime bootstrapping code from vendor chunks when using webpack 1.x with CommonsChunkPlugin. It prevents the vendor bundle from re-executing the vendor modules on load, ensuring that the runtime only exists in the main bundle. This plugin is specific to webpack 1.x and is not needed for webpack 2+ where the runtime behavior was changed. It is a niche tool for legacy webpack configurations where splitting vendor bundles incorrectly included runtime code.

Common errors

error Cannot find module './VendorChunkPlugin' ↓

cause Typo in require path or incorrect package installation.

fix

Run 'npm install webpack-vendor-chunk-plugin --save-dev' and require with correct case: require('webpack-vendor-chunk-plugin')

error VendorChunkPlugin is not a constructor ↓

cause Importing the module incorrectly in an ES module environment.

fix

Use CommonJS require: var VendorChunkPlugin = require('webpack-vendor-chunk-plugin');

error Invalid chunk name 'vendor': chunk not found ↓

cause CommonsChunkPlugin not configured or chunk name mismatch.

fix

Add CommonsChunkPlugin with the same chunk name before VendorChunkPlugin.

error Cannot read property 'chunks' of undefined ↓

cause VendorChunkPlugin called before CommonsChunkPlugin has processed chunks (wrong order in plugins array).

fix

Place CommonsChunkPlugin before VendorChunkPlugin in the plugins array.

Warnings

deprecated This plugin is only compatible with webpack 1.x. Webpack 2 and later handle vendor chunk runtime correctly without this plugin. ↓

fix Upgrade to webpack 2+ and remove this plugin.

gotcha The plugin must be placed after CommonsChunkPlugin in the plugins array, otherwise it will not find the vendor chunk. ↓

fix Ensure CommonsChunkPlugin is registered before VendorChunkPlugin.

gotcha Passing an array of chunk names is supported but can be misleading; the plugin only removes runtime from chunks that are already extracted by CommonsChunkPlugin. ↓

fix Use a single chunk name that matches the CommonsChunkPlugin's output chunk.

breaking In some configurations, removing runtime code may cause modules in the vendor chunk to not execute at all if they have side effects. ↓

fix Ensure vendor modules do not rely on runtime execution order; move side-effectful code to the main bundle.

Install

npm install webpack-vendor-chunk-plugin

yarn add webpack-vendor-chunk-plugin

pnpm add webpack-vendor-chunk-plugin

Imports

VendorChunkPlugin

wrong

import VendorChunkPlugin from 'webpack-vendor-chunk-plugin';

correct

var VendorChunkPlugin = require('webpack-vendor-chunk-plugin');

This package is CommonJS only and predates ES modules in Node.js.

VendorChunkPlugin
wrong
```
new VendorChunkPlugin(['vendor']);
```
correct
```
new VendorChunkPlugin('vendor');
```
The constructor accepts either a string or an array of strings, but using a single string is typical.

VendorChunkPlugin

wrong

plugins: [new VendorChunkPlugin('vendor')]

correct

plugins: [new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'), new VendorChunkPlugin('vendor')]

Must be used after CommonsChunkPlugin in the plugins array.

Quickstart

Configures webpack 1.x to extract vendor modules into a separate chunk and removes runtime code from that chunk using VendorChunkPlugin.

var webpack = require('webpack');
var VendorChunkPlugin = require('webpack-vendor-chunk-plugin');
module.exports = {
  entry: {
    app: './app.js',
    vendor: ['react', 'redux'],
  },
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
    new VendorChunkPlugin('vendor'),
  ],
};