Registry / devops / optimize-css-assets-webpack-plugin

optimize-css-assets-webpack-plugin

JSON →
library6.0.1jsnpmunverified

A Webpack plugin that searches for CSS assets during the build and optimizes/minimizes them using cssnano by default. It solves the CSS duplication problem when using extract-text-webpack-plugin. The latest version is 6.0.1, but it is deprecated for webpack v5+ in favor of css-minimizer-webpack-plugin. It supports webpack v4 and above, with v4+ requiring webpack v4. Release cadence is low; maintenance mode.

npm install optimize-css-assets-webpack-plugin
INSTALL
IMPORT
SIG · OPTIMIZE-CSS-ASSET
O
optimize-css-assets-webpack-plugin
devopsjavascriptv6.0.1
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

OptimizeCssAssetsPlugin
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
CommonJS require is the recommended pattern; ESM import may fail if the package does not provide an ESM entry.
OptimizeCssAssetsPlugin
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { OptimizeCssAssetsPlugin } = require('optimize-css-assets-webpack-plugin');
The package exports a single constructor function, not a named export. Destructuring will result in undefined.
OptimizeCssAssetsPlugin
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const Opt = require('optimize-css-assets-webpack-plugin').default;
CommonJS module does not have a default export; accessing .default yields undefined.

Configures webpack v4 with extract-text-webpack-plugin and optimize-css-assets-webpack-plugin to extract CSS into a separate file and minimize it using cssnano.

const path = require('path'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) } ] }, plugins: [ new ExtractTextPlugin('styles.css'), new OptimizeCssAssetsPlugin({ assetNameRegExp: /\.optimize\.css$/g, cssProcessor: require('cssnano'), cssProcessorPluginOptions: { preset: ['default', { discardComments: { removeAll: true } }] }, canPrint: true }) ] };
Debug
Known issues
deprecatedThis plugin is deprecated for webpack v5. Use css-minimizer-webpack-plugin instead.
fix
Replace optimize-css-assets-webpack-plugin with css-minimizer-webpack-plugin.
affects: >=6.0.0
breakingVersion 4.0.0 drops support for webpack v3 and below.
fix
If using webpack v3, use optimize-css-assets-webpack-plugin@3.2.0.
affects: >=4.0.0
gotchaThe module.exports.CommonJS pattern is required; ES module import may fail.
fix
Use require() instead of import.
affects: all
gotchaThe plugin does not support ES module syntax; import will result in undefined.
fix
Use const Plugin = require('...')
affects: all
Errors
Common errors & fixes
TypeError: OptimizeCssAssetsPlugin is not a constructor
Using import statement that returns an object without default export.
fix
Use const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
Error: Cannot find module 'cssnano'
cssnano is not installed; it is required as a peer or direct dependency.
fix
npm install --save-dev cssnano
Error: webpack < 4 is not supported
Using webpack v3 with v4+ of the plugin.
fix
Use optimize-css-assets-webpack-plugin@3.2.0 for webpack v3.
Upgrade
Version history
6.0.1latest on npm
Audit
Dependencies
webpackrequiredPeer dependency; plugin runs as a webpack plugin
Agent activity
5 hits · last 30 days
node
4
Resources
optimize-css-assets-webpack-plugin — npm install optimize-css-assets-webpack-plugin · libregistry