flush-css-chunks-webpack-plugin

Generates CSS asset map from chunks

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
flush-css-chunks-webpack-plugin
0.2.06 years ago6 years agoMinified + gzip package size for flush-css-chunks-webpack-plugin in KB

Popular Searches

Readme

src="https://cdn.rawgit.com/mario-jerkovic/flush-css-chunks-webpack-plugin/22d6154e/flush_css.png">
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``: ```javascript window.CSSCHUNKS = {
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) :thumbsup:

 # Usage
 
```javascript
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 `.js` produced by webpack. 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.