{"id":20254,"library":"optimize-css-assets-webpack-plugin","title":"Optimize CSS Assets Webpack Plugin","description":"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.","status":"maintenance","version":"6.0.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/NMFR/optimize-css-assets-webpack-plugin","tags":["javascript","CSS","duplicate","extract-text-webpack-plugin","minimize","optimize","remove","webpack"],"install":[{"cmd":"npm install optimize-css-assets-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add optimize-css-assets-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add optimize-css-assets-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin runs as a webpack plugin","package":"webpack","optional":false}],"imports":[{"note":"CommonJS require is the recommended pattern; ESM import may fail if the package does not provide an ESM entry.","wrong":"import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';","symbol":"OptimizeCssAssetsPlugin","correct":"const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');"},{"note":"The package exports a single constructor function, not a named export. Destructuring will result in undefined.","wrong":"const { OptimizeCssAssetsPlugin } = require('optimize-css-assets-webpack-plugin');","symbol":"OptimizeCssAssetsPlugin","correct":"const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');"},{"note":"CommonJS module does not have a default export; accessing .default yields undefined.","wrong":"const Opt = require('optimize-css-assets-webpack-plugin').default;","symbol":"OptimizeCssAssetsPlugin","correct":"const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');"}],"quickstart":{"code":"const path = require('path');\nconst webpack = require('webpack');\nconst ExtractTextPlugin = require('extract-text-webpack-plugin');\nconst OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: ExtractTextPlugin.extract({\n          fallback: 'style-loader',\n          use: 'css-loader'\n        })\n      }\n    ]\n  },\n  plugins: [\n    new ExtractTextPlugin('styles.css'),\n    new OptimizeCssAssetsPlugin({\n      assetNameRegExp: /\\.optimize\\.css$/g,\n      cssProcessor: require('cssnano'),\n      cssProcessorPluginOptions: {\n        preset: ['default', { discardComments: { removeAll: true } }]\n      },\n      canPrint: true\n    })\n  ]\n};","lang":"javascript","description":"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."},"warnings":[{"fix":"Replace optimize-css-assets-webpack-plugin with css-minimizer-webpack-plugin.","message":"This plugin is deprecated for webpack v5. Use css-minimizer-webpack-plugin instead.","severity":"deprecated","affected_versions":">=6.0.0"},{"fix":"If using webpack v3, use optimize-css-assets-webpack-plugin@3.2.0.","message":"Version 4.0.0 drops support for webpack v3 and below.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Use require() instead of import.","message":"The module.exports.CommonJS pattern is required; ES module import may fail.","severity":"gotcha","affected_versions":"all"},{"fix":"Use const Plugin = require('...')","message":"The plugin does not support ES module syntax; import will result in undefined.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');","cause":"Using import statement that returns an object without default export.","error":"TypeError: OptimizeCssAssetsPlugin is not a constructor"},{"fix":"npm install --save-dev cssnano","cause":"cssnano is not installed; it is required as a peer or direct dependency.","error":"Error: Cannot find module 'cssnano'"},{"fix":"Use optimize-css-assets-webpack-plugin@3.2.0 for webpack v3.","cause":"Using webpack v3 with v4+ of the plugin.","error":"Error: webpack < 4 is not supported"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}