webpack-split-chunks

Webpack split chunks plugin  

This plugin transfers modules whose absolute path matches your condition from a list of chunks into a single target chunk.

Benefits

Using this on external bundles can increase dev re-builds performance and optimize clients browser cache in production, because it includes a lot of modules that you have no intention of changing.

Usage

// webpack.config.js
const webpack = require('webpack');
const ChunksPlugin = require('webpack-split-chunks');

module.exports = {
    entry: {
        bundle: './src',
    },
    output: {
        path: './build'
    },
    plugins: [
        new ChunksPlugin({
            to: 'vendor',
            test: /node_modules/ // or an array of regex
        })
    ]
};

With this configuration all the modules that were require'd in the bundle chunk whose absolute path contains the substring "node_modules" would be instead added to the vendor chunk – and not into the bundle chunk where they would otherwise be.

Webpack 2.x and 1.x compatibility

The latest version of this plugin is capable with Webpack@^2.0.0 and Webpack@^1.5.0.
Earlier versions of Webpack are not supported anymore.

API

new ChunksPlugin(options)

options: Object (required)

• from: string | Array[string] (optional)
  Specifies name(s) of chunks which will be processed. If omitted, all chunks will be processed.

  Note: omit this param if you want webpack-split-chunks to process your AMD-defined chunks

• to: string (required)
  The name of target chunk.

• test: Function | RegExp | Array[RegExp] (required)
  The chunks whose absolute path meets any of regexp will be moved to target chunk.

  You can provide your own tester function, every module will be applied to it.

    test: (resource, module) => boolean
  

  Where:

  • resource: string
    The absolute path to module

  • module: Object
    Webpack's Module object with module meta-info

Examples

Search for multiple path masks and combine into single chunk

    new ChunksPlugin({
        to: 'vendor',
        test: /node_modules|bower_components/
//        or
        test: [/node_modules/, /bower_components/]
    })

Move all modules bigger than 10KB to large-chunk.js

    new ChunksPlugin({
        to: 'large-chunk',
        test(path, module) {
            const source = source
            if(source) {
                const size = Buffer.byteLength(source)
                return size > 10 * 1024 * 8
            }
        }
    })

Provide specific chunks/entries to extract from

module.exports = {
    entry: {
        portal: './src',
        admin: './src/admin',
        app: './src/app'
    },
    output: {
        path: './build'
    },
    plugins: [
        new ChunksPlugin({
            from: ['portal', 'admin']
            to: 'vendor',
            test: /node_modules/ // or an array of regex
        })
    ]
};

License

ISC