Skip to content

Automating division process of files to serve your webpack bundles

License

Notifications You must be signed in to change notification settings

lxjwlt/split-webpack-plugin

Repository files navigation

split-webpack-plugin

Node version NPM version Build status codecov

This is a webpack plugin for Automating segmentation process of files. That can be more helpful when we should split all files manually, especially using multiple third-party libraries. You can simply divide your files by size or the number of eventually segmented files.

This plugin works with webpack 1.x, 2.x and 3.x

Installation

npm install split-webpack-plugin -D

Usage

Add the plugin to webpack plugins configure:

var SplitPlugin = require('split-webpack-plugin');
var webpackConfig = {

    // ...

    plugins: [
        new SplitPlugin({
            size: 512 // 512 KB
        })
    ]
};

Configuration:

  • size: The size of each partitioned block, measured in KB

  • async: true | false default is true, the plugin uses require.ensure method to divide modules, so we simply insert entry chunk to html manually to startup our app. check example: async

    however if plugins has applied html-webpack-plugin in webpack, you can set option.async to false, html-webpack-plugin will put all segmented chunks into html template automatically:

    const DividePlugin = require('split-webpack-plugin');
    const HtmlPlugin = require('html-webpack-plugin');
    var webpackConfig = {
    
        entry: {
            app: './app.js'
        },
        // ...
    
        plugins: [
            new DivideWebpackPlugin({
                size: 512 // 512 KB,
                async: false
            }),
            new HtmlPlugin()
        ]
    };

    Automatically generated html would be like:

    <script type="text/javascript" src="divide-chunk_app0.js"></script>
    <script type="text/javascript" src="divide-chunk_app1.js"></script>
    <script type="text/javascript" src="app.js"></script>

    check example: sync.

  • chunks: specific entry chunks in segmentation process, default is all entries. e.g.Different config for different entries:

        const SplitPlugin = require('split-webpack-plugin');
        var webpackConfig = {
            entry: {
                app: './src/app.js',
                login: './src/login.js'
            },
            plugins: [
                new SplitPlugin({
                    chunks: ['app'],
                    size: 256 // 256 KB
                }),
                new SplitPlugin({
                    chunks: ['login'],
                    divide: 2
                })
            ]
        };
  • excludeChunks: skip these chunks from segmentation process

  • divide: The number of partitioned block which each files will be divided into. When option.divide greater than 1, split-webpack-plugin will ignore option.size.

css

When options.async:true, divide-plugin would't partition the files that have been processed by css-loader or style-loader, so the css files can be loaded immediately. but a better way is to use extract-text-webpack-plugin. check example: extract-css.

All css files are bundled into one file:

var webpackConfig = {
    plugins: [
        // ...
        new ExtractTextPlugin("styles.css")
    ]
};

Keep segmented css files:

var webpackConfig = {
    plugins: [
        // ...
        new ExtractTextPlugin("[name].css")
    ]
};

About

Automating division process of files to serve your webpack bundles

Resources

License

Stars

Watchers

Forks

Packages

No packages published