How to use optimize-css-assets-webpack-plugin - 10 common examples

yandex: true,
          },
        }),
      ],
    })
  }

  // webpack optimize production assets (minify and de-dupe: css, js, etc.)
  if (env !== 'develop') {
    console.log(env, 'Optimizing assets in Prod mode...')
    webpack.merge({
      plugins: [
        new DefinePlugin({
          'process.env': {NODE_ENV: JSON.stringify('production')},
        }),
        new OptimizeCssAssetsPlugin(),
        new optimize.DedupePlugin(),
        new optimize.OccurrenceOrderPlugin(),
        new optimize.UglifyJsPlugin(),
      ],
    })
  }

  // webpack path: static asset build + config:linkPrefix (gh-pages, etc)
  if (env !== 'develop') {
    console.log(env, 'Init correct webpack asset publicPath in Prod mode...')
    webpack.merge({
      output: {publicPath: `${config.linkPrefix}/`},
    })
  }

  return webpack

removeAttributeQuotes: true,
      }),
      buildVersion: new Date().valueOf(),
      chunksSortMode: 'none',
    }),

    new VueLoaderPlugin(),

    // create css files
    ifProd(new MiniCssExtractPlugin({
      filename: `assets/css/[name]${ifProd('.[hash]', '')}.css`,
      chunkFilename: `assets/css/[name]${ifProd('.[hash]', '')}.css`,
    })),

    // minify css files
    ifProd(new OptimizeCssAssetsPlugin({
      cssProcessorOptions: {
        reduceIdents: false,
        autoprefixer: false,
        zindex: false,
        discardComments: {
          removeAll: true,
        },
      },
    })),

    // svg icons
    new SvgStore({
      prefix: 'icon--',
      svgoOptions: {
        plugins: [
          { cleanupIDs: false },

new UglifyJsPlugin({
      cache: true,
      parallel: true,
      // set to true if you want JS source maps
      sourceMap: false,
      uglifyOptions: {
        compress: {
          warnings: true,
          dead_code: true,
          drop_debugger: true,
          drop_console: true
        }
      }
    }),

    new OptimizeCSSAssetsPlugin({
      cssProcessor: require('cssnano'),
      cssProcessorOptions: { 'postcss-discard-unused': false }
    }),

    new MiniCssExtractPlugin({
      filename: `[name]/${bundleFileNamePattern('.css')}`
    }),

    new ChunkHashOutputPlugin({
      validateOutput: false,
      version,
      enableBundleHashName,
      validateOutputRegex: /bundle.*\.(js|css)/
    })
  );

: [
                  new TerserWebpackPlugin({
                      cache: true,
                      // Exclude swagger-ui from minification which is a large bundle and costly to minify.
                      exclude: /swagger-ui/,
                      terserOptions: {
                          warnings: false,
                          ie8: false,
                          output: {
                              comments: false,
                          },
                      },
                      parallel: true,
                      sourceMap: true, // set to true if you want JS source maps
                  }),
                  new OptimizeCSSAssetsPlugin({ cssProcessorOptions: { map: { inline: false, annotations: true } } }),
              ],
    };

    baseConfig.plugins!.push(
        new SourceMapDevToolPlugin({
            namespace: `vanilla-${section}`,
            filename: `sourcemaps/`.concat(
                Math.random()
                    .toString(36)
                    .slice(-5),
                "/",
                "[chunkhash]",
            ),
            publicPath: `/api/v2/sourcemaps/${section}/`, // PHP-FPM will serve these files with some permission checks in SourcemapsApiController.
        } as any),
    );

const plugins = removeEmpty([
        definePlugin,
        ifProduction(new ModuleIdsPlugin()),
        ifProduction(new ChunkIdsPlugin({ projectRoot })),
        ifProduction(new AssetFileNamePlugin()),
        ifDevelopment(new webpack.NoEmitOnErrorsPlugin()),
        ifDevelopment(new webpack.HotModuleReplacementPlugin()),
        new ExtractTextPlugin("styles.css"),
        new AssetsMetaPlugin({ projectRoot, urlGenerator }),
        ifDevelopment(new webpack.NamedModulesPlugin()),
        ifProduction(new webpack.optimize.ModuleConcatenationPlugin()),
        ifProduction(new webpack.HashedModuleIdsPlugin()),
        ifProduction(new UglifyJsPlugin()),
        ifProduction(
            new OptimizeCssAssetsPlugin({
                canPrint: false,
                assetNameRegExp: /\.css$/,
                cssProcessorOptions: {
                    discardComments: { removeAll: true },
                    safe: true,
                    reduceInitial: { disable: true }
                }
            })
        )
    ]);

    // Check if app has vendor DLL defined
    const dllPath = path.resolve(
        path.join(projectRoot, "dist", process.env.NODE_ENV, "vendor.manifest.json")
    );

minimize: ifProduction(),
            minimizer: ifProduction(
                [
                    /**
                     * Minify the code JavaScript
                     *
                     * @env production
                     */
                    new TerserPlugin({
                        extractComments: "all",
                        sourceMap: options.withSourceMap,
                        terserOptions: {
                            safari10: true,
                        },
                    }),
                    new OptimizeCSSAssetsPlugin(),
                ],
                [],
            ),
            noEmitOnErrors: true,
            /**
             * @todo See how we can stop vendors-main (no s)
             * @todo Make configurable v8 (include ability to provide these rules in json form)
             */
            splitChunks: {
                cacheGroups: {
                    coreJs: {
                        name: "vendor~core-js",
                        test: /[\\/]node_modules[\\/](core-js)[\\/]/,
                    },
                    lodash: {
                        name: "vendor~lodash",

    minifyCss: (options = {}) => new OptimizeCssAssetsPlugin(options),

function createWebpackConfig(env, entries) {
  const { development, sourceFilePattern, buildDirs } = config;
  const preset = { client: "browser", server: "node" }[env];

  const webpackConfig = {
    mode: development ? "development" : "production",
    devtool: development ? "eval-source-map" : false,
    entry: entries[env],
    output: {
      filename: "[chunkhash].js",
      path: resolve(buildDirs[env]),
    },
    optimization: {
      minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin()],
      usedExports: true,
      splitChunks: {
        chunks: "all",
      },
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: "[contenthash].css",
      }),
    ],
    module: {
      rules: [
        {
          test: file => file.endsWith(".css"),
          use: [
            {

)
    output = {
      path: pathValue,
      filename: '[name].js',
      library: packageJson.name,
      libraryTarget: 'umd'
    }
    target = 'electron-renderer'
    plugins.push(
      new CleanWebpackPlugin(
        [pathValue]
      ),
      new MiniCssExtractPlugin({
        filename: '[name].css'
      }),
      new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessorOptions: {
          map: {
            inline: false
          }
        }
      })
    )
  } else if (entryName === 'move-winpty-binaries') {
    entry = {
      'move-winpty-binaries': './src/scripts/move-winpty-binaries'
    }
    pathValue = path.resolve(
      __dirname,
      'dist',
      'preinstallScripts'