Awesome

webpack-blocks-split-vendor

A webpack block that splits vendor javascript into separated bundle.

Install

$ npm install --save webpack-blocks-split-vendor

Usage

const { createConfig, env } = require('webpack-blocks')
const splitVendor = require('webpack-blocks-split-vendor')

module.exports = createConfig([
  // creates a vendor.js file (or vendor.[chunkhash].js in production)
  splitVendor(),

  // creates a foo.js file
  splitVendor('foo'), 

  // creates a foo.js file, but keeps offline-plugin/runtime out of vendor
  splitVendor({ name: 'foo', exclude: /offline-plugin\/runtime\.js/ })

  // creates a vendor.js file, but keeps lodash and offline-plugin/runtime out of vendor
  splitVendor({ exclude: [/lodash/, /offline-plugin\/runtime\.js/] })
])

How it does

changes the output filename to [name].[chunkhash].js;
creates a bundle with node_modules/**/*.js files with the help of CommonsChunkPlugin;
uses webpack-md5-hash instead of the standard webpack chunkhash so vendor bundle will have different hash from other bundles (otherwise, we would invalidate the vendor bundle cache everytime we update the app bundle, which would make this approach useless).

For more details, see src/index.js.

API

splitVendor
Condition
Options

splitVendor

Returns a webpack block that splits vendor javascript bundle.

Parameters

options (string | Options)

Returns Function

Condition

Type: (string | RegExp | Array<Condition>)

Options

Type: {name: string, test: Condition?, exclude: Condition?}

Properties

name string
test Condition?
exclude Condition?