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

Table of Contents

• 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?

Other useful webpack blocks

• webpack-blocks-happypack
• webpack-blocks-server-source-map

License

MIT © Diego Haz