diff options
| author | ruki <waruqi@gmail.com> | 2018-11-08 00:38:48 +0800 |
|---|---|---|
| committer | ruki <waruqi@gmail.com> | 2018-11-07 21:53:09 +0800 |
| commit | 26105034da4fcce7ac883c899d781f016559310d (patch) | |
| tree | c459a5dc4e3aa0972d9919033ece511ce76dd129 /node_modules/optimize-css-assets-webpack-plugin/README.md | |
| parent | 2c77f00f1a7ecb6c8192f9c16d3b2001b254a107 (diff) | |
| download | xmake-docs-26105034da4fcce7ac883c899d781f016559310d.tar.gz xmake-docs-26105034da4fcce7ac883c899d781f016559310d.zip | |
switch to vuepress
Diffstat (limited to 'node_modules/optimize-css-assets-webpack-plugin/README.md')
| -rw-r--r-- | node_modules/optimize-css-assets-webpack-plugin/README.md | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/node_modules/optimize-css-assets-webpack-plugin/README.md b/node_modules/optimize-css-assets-webpack-plugin/README.md new file mode 100644 index 00000000..71e2bf48 --- /dev/null +++ b/node_modules/optimize-css-assets-webpack-plugin/README.md @@ -0,0 +1,57 @@ +# 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 +``` + +> :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. + +## 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 `{}` +* 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'), + cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, + canPrint: true + }) + ] +}; +``` + +## License + +MIT (http://www.opensource.org/licenses/mit-license.php) |
