https://github.com/nmfr/optimize-css-assets-webpack-plugin

A Webpack plugin to optimize \ minimize CSS assets.
https://github.com/nmfr/optimize-css-assets-webpack-plugin

css-assets css-processor minimisation minimization minimizes webpack-plugin

Last synced: 3 days ago
JSON representation

A Webpack plugin to optimize \ minimize CSS assets.

• Host: GitHub
• URL: https://github.com/nmfr/optimize-css-assets-webpack-plugin
• Owner: NMFR
• License: mit
• Created: 2016-01-09T00:52:16.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T17:53:46.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T12:16:29.672Z (6 months ago)
• Topics: css-assets, css-processor, minimisation, minimization, minimizes, webpack-plugin
• Language: JavaScript
• Size: 1.08 MB
• Stars: 1,157
• Watchers: 13
• Forks: 69
• Open Issues: 42
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Optimize CSS Assets Webpack Plugin

A Webpack plugin to optimize \ minimize CSS assets.

> :warning: For webpack v5 or above please use [css-minimizer-webpack-plugin](https://github.com/webpack-contrib/css-minimizer-webpack-plugin) instead.

## 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 it's 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

```

> :warning: For webpack v3 or below please use `[email protected]`. The `[email protected]` version and above supports webpack v4.

## 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. The regular expression provided is run against the filenames of the files exported by the `ExtractTextPlugin` instances in your configuration, not the filenames of your source CSS files. 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 `{}`

* `cssProcessorPluginOptions`: The plugin 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: {

    rules: [

      {

        test: /\.css$/,

        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')

      }

    ]

  },

  plugins: [

    new ExtractTextPlugin('styles.css'),

    new OptimizeCssAssetsPlugin({

      assetNameRegExp: /\.optimize\.css$/g,

      cssProcessor: require('cssnano'),

      cssProcessorPluginOptions: {

        preset: ['default', { discardComments: { removeAll: true } }],

      },

      canPrint: true

    })

  ]

};

```

## License

MIT (http://www.opensource.org/licenses/mit-license.php)