https://github.com/mario-jerkovic/flush-css-chunks-webpack-plugin

Generates CSS asset map from chunks
https://github.com/mario-jerkovic/flush-css-chunks-webpack-plugin

webpack webpack-plugin

Last synced: 3 months ago
JSON representation

Generates CSS asset map from chunks

• Host: GitHub
• URL: https://github.com/mario-jerkovic/flush-css-chunks-webpack-plugin
• Owner: mario-jerkovic
• License: mit
• Created: 2017-08-06T16:42:10.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-04T10:48:18.000Z (almost 7 years ago)
• Last Synced: 2024-04-27T21:43:05.415Z (8 months ago)
• Topics: webpack, webpack-plugin
• Language: JavaScript
• Size: 90.8 KB
• Stars: 12
• Watchers: 3
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        




  

  
Flush CSS Chunks Webpack Plugin

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



 # Installation

 

```bash

yarn add flush-css-chunks-webpack-plugin

```

or

```bash

npm install flush-css-chunks-webpack-plugin

```

## Introduction

 If your using awesome [babel-plugin-dual-import](https://github.com/faceyspacey/babel-plugin-dual-import)

 or [babel-plugin-universal-import](https://github.com/faceyspacey/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.__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) :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 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.