minify multiple css files for angular 6 project using webpack

Question

Angular 6 compresses the CSS file but didn't minify it. I need to minify CSS files.

Currently I'm using these commands for production build.

package.json

"build": "run-s build:client build:aot build:server",
"build:client": "ng build --prod --build-optimizer && ng run elgrocer:server",
"build:aot": "ng build --aot --prod --build-optimizer --output-hashing=all",
"build:server": "webpack -p"

webpack.config.js

    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
      },
      module: {
        rules: [
          { test: /\.ts$/, loader: 'ts-loader' }
        ]
      },
      optimization: {
        minimizer: [
          new UglifyJsPlugin()
        ]
      },
      plugins: [
        new CompressionPlugin({
          algorithm: 'gzip'
        })
      ]

currently its adding the css style in index.html file like that.

<style ng-transition="app">.sign-in[_ngcontent-sc6] {
    font-size: 15px;
    padding: 8px 16px;
    border-radius: 100px;
}

.sign-up[_ngcontent-sc6] {
    font-size: 15px;
    padding: 6px 14px;
    border-radius: 100px;
    border: 2px solid var(--Primary-Brand-1)!important;
    color: var(--Primary-Brand-1);
}

.sign-in[_ngcontent-sc6] {
    background: var(--Primary-Brand-1);
}

.top-nav[_ngcontent-sc6]   li[_ngcontent-sc6] {
    list-style: none;
    display: inline-block;
    margin-left: 10px
}</style>

desired results

<style ng-transition="app">.sign-in[_ngcontent-sc6]{font-size:15px;padding:8px 16px;border-radius:100px;}.sign-up[_ngcontent-sc6]{font-size:15px;padding:6px 14px;border-radius:100px;border:2px solid var(--Primary-Brand-1)!important;color:var(--Primary-Brand-1);}.sign-in[_ngcontent-sc6]{background:var(--Primary-Brand-1);}.top-nav[_ngcontent-sc6]li[_ngcontent-sc6]{list-style:none;display:inline-block;margin-left:10px}</style>

Answer 1

You can use CssMinimizerWebpackPlugin. Install it first:

$ npm install css-minimizer-webpack-plugin --save-dev

Then add it to your config:

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

...

  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  },
  optimization: {
    minimize: true,
    minimizer: [
      new UglifyJsPlugin(),
      new CssMinimizerPlugin()
    ]
  },
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip'
    })
  ]

Edit from your edit

Maybe you have this behavior because you're not extracting the css in a separate file, so you can use use HtmlWebpackPlugin to do the job:

npm install --save-dev html-webpack-plugin

In you config add the plugin:

var HtmlWebpackPlugin = require('html-webpack-plugin');


  plugins: [
    new HtmlWebpackPlugin(),
    new CompressionPlugin({
      algorithm: 'gzip'
    })
  ]