Flush CSS Chunks Webpack Plugin

Generates CSS hash for mapping between Webpack chunks and CSS chunks.

Installation

yarn add flush-css-chunks-webpack-plugin

or

npm install flush-css-chunks-webpack-plugin

Introduction

If your using awesome babel-plugin-dual-import or babel-plugin-universal-import and for some reason you cannot implement SSR than this plugin is what you need.

It maps trough webpack stats and generates cssHash:

window.__CSS_CHUNKS__ = {
   Foo: '/static/Foo.css',
   Bar: '/static/Bar.css'
}

cssHash will be injected in your .js or hot-update.js files which are generated by webpack so that means it also works with Hot module replacement (HMR) 👍

Usage

const FlushCSSChunksWebpackPlugin = require('flush-css-chunks-webpack-plugin');

const config = {
    entry: '...',
    output: {},
    modules: {},
    plugins: [
        new FlushCSSChunksWebpackPlugin({
            assetPath: '/asset/static/', // defaults to output.publichPath defined in webpack.config
            entryOnly: true, // defaults to false,
            entries: ['common'] // defaults to null
        })
    ]
};

• assetPath - default: null By default plugin uses output.publichPath defined in webpack.config to generate asset mapping but if you need custom asset path you can use this property
• entryOnly - default: false By default plugin injects the cssHash to every .js file produced by webpack as this enables hot swap mapping, if set to true plugin will only inject the mapping in the initial .js bundle (use only for PRODUCTION)
• entries - default: null By default, if entryOnly is specified, plugin injects the cssHash into every entry chunk. Using this option you can specify entry chunks in which the CSS mapping will be injected. This is useful if you have common chunks that are already loaded on the page. Note: This only works if entryOnly is set to true, if it is set to false, CSS mapping will be injected in every chunk.