Optimize CSS Assets Webpack Plugin
A Webpack plugin to optimize \ minimize CSS assets.
What does the plugin do?
It will search for CSS assets during the Webpack build and will optimize \ minimize the CSS (by default it uses cssnano but a custom CSS processor can be specified).
Solves extract-text-webpack-plugin CSS duplication problem:
Since extract-text-webpack-plugin only bundles (merges) text chunks, if its used to bundle CSS, the bundle might have duplicate entries (chunks can be duplicate free but when merged, duplicate CSS can be created).
Installation:
Using npm:
$ npm install --save-dev optimize-css-assets-webpack-plugin
Configuration:
The plugin can receive the following options (all of them are optional):
- assetNameRegExp: A regular expression that indicates the names of the assets that should be optimized \ minimized, defaults to
/\.css$/g - cssProcessor: The CSS processor used to optimize \ minimize the CSS, defaults to cssnano. This should be a function that follows cssnano.process interface (receives a CSS and options parameters and returns a Promise).
- cssProcessorOptions: The options passed to the cssProcessor, defaults to
{} - canPrint: A boolean indicating if the plugin can print messages to the console, defaults to
true
Example:
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: {removeAll: true } },
canPrint: true
})
]
}