Optimized css assets webpack plugin

Optimize CSS Assets Webpack Plugin

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 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:

$ npm install --save-dev optimize-css-assets-webpack-plugin

⚠️ 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 . 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:

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 >) ] >;

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

A Webpack plugin to optimize \ minimize CSS assets.

License

NMFR/optimize-css-assets-webpack-plugin

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Optimize CSS Assets Webpack Plugin

A Webpack plugin to optimize \ minimize CSS assets.

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).

Since 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).

$ npm install --save-dev optimize-css-assets-webpack-plugin

⚠️ 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.

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 . 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

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 >) ] >;

Источник

Optimize CSS Assets Webpack Plugin

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 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:

$ npm install --save-dev optimize-css-assets-webpack-plugin

⚠️ 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 . 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:

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 >) ] >;

Источник

Optimize CSS Assets Webpack Plugin

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 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:

$ npm install --save-dev optimize-css-assets-webpack-plugin

⚠️ 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 . 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:

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 >) ] >;

Источник

Optimize CSS Assets Webpack Plugin

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 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:

$ npm install --save-dev optimize-css-assets-webpack-plugin

⚠️ 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 . 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:

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 >) ] >;

Источник