Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

A Webpack plugin to optimize \ minimize CSS assets.

License

NotificationsYou must be signed in to change notification settings

NMFR/optimize-css-assets-webpack-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

64 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A Webpack plugin to optimize \ minimize CSS assets.

⚠️ For webpack v5 or above please usecss-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 usescssnano but a custom CSS processor can be specified).

Solvesextract-text-webpack-plugin CSS duplication problem:

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

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

⚠️ For webpack v3 or below please useoptimize-css-assets-webpack-plugin@3.2.0. Theoptimize-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 theExtractTextPlugin 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 tocssnano. This should be a function that followscssnano.process interface (receives a CSS and options parameters and returns a Promise).
  • cssProcessorOptions: The options passed to thecssProcessor, defaults to{}
  • cssProcessorPluginOptions: The plugin options passed to thecssProcessor, defaults to{}
  • canPrint: A boolean indicating if the plugin can print messages to the console, defaults totrue

Example:

varOptimizeCssAssetsPlugin=require('optimize-css-assets-webpack-plugin');module.exports={module:{rules:[{test:/\.css$/,loader:ExtractTextPlugin.extract('style-loader','css-loader')}]},plugins:[newExtractTextPlugin('styles.css'),newOptimizeCssAssetsPlugin({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)

About

A Webpack plugin to optimize \ minimize CSS assets.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors14


[8]ページ先頭

©2009-2025 Movatter.jp