You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

61 lines
2.6 KiB

4 years ago
  1. # Optimize CSS Assets Webpack Plugin
  2. A Webpack plugin to optimize \ minimize CSS assets.
  3. ## What does the plugin do?
  4. 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).
  5. ### Solves [extract-text-webpack-plugin](http://github.com/webpack/extract-text-webpack-plugin) CSS duplication problem:
  6. 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).
  7. ## Installation:
  8. Using npm:
  9. ```shell
  10. $ npm install --save-dev optimize-css-assets-webpack-plugin
  11. ```
  12. > :warning: For webpack v3 or below please use `optimize-css-assets-webpack-plugin@3.2.0`. The `optimize-css-assets-webpack-plugin@4.0.0` version and above supports webpack v4.
  13. ## Configuration:
  14. The plugin can receive the following options (all of them are optional):
  15. * `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`
  16. * `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).
  17. * `cssProcessorOptions`: The options passed to the `cssProcessor`, defaults to `{}`
  18. * `cssProcessorPluginOptions`: The plugin options passed to the `cssProcessor`, defaults to `{}`
  19. * `canPrint`: A boolean indicating if the plugin can print messages to the console, defaults to `true`
  20. ## Example:
  21. ``` javascript
  22. var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  23. module.exports = {
  24. module: {
  25. rules: [
  26. {
  27. test: /\.css$/,
  28. loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
  29. }
  30. ]
  31. },
  32. plugins: [
  33. new ExtractTextPlugin('styles.css'),
  34. new OptimizeCssAssetsPlugin({
  35. assetNameRegExp: /\.optimize\.css$/g,
  36. cssProcessor: require('cssnano'),
  37. cssProcessorPluginOptions: {
  38. preset: ['default', { discardComments: { removeAll: true } }],
  39. },
  40. canPrint: true
  41. })
  42. ]
  43. };
  44. ```
  45. ## License
  46. MIT (http://www.opensource.org/licenses/mit-license.php)