53 lines
2.0 KiB
Markdown
53 lines
2.0 KiB
Markdown
# 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](http://github.com/ben-eb/cssnano) but a custom CSS processor can be specified).
|
|
|
|
### Solves [extract-text-webpack-plugin](http://github.com/webpack/extract-text-webpack-plugin) CSS duplication problem:
|
|
|
|
Since [extract-text-webpack-plugin](http://github.com/webpack/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:
|
|
```shell
|
|
$ 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](http://github.com/ben-eb/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:
|
|
|
|
``` javascript
|
|
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
|
|
})
|
|
]
|
|
}
|
|
```
|
|
|
|
## License
|
|
|
|
MIT (http://www.opensource.org/licenses/mit-license.php)
|