Angular-builders: Example of replacing the minimizer

[RyanHow]

Is your feature request related to a problem? Please describe.
I'm trying to replace the options for the minimizer in angular-cli 7. But it doesn't seem to be working. No matter what config I set, the standard minimizer seems to be running.

Describe the solution you'd like
Is there a way to view the final webpack config output? I'm concerned I'm just appending another minimizer rather than replacing it. Or just an example of replacing the minimizer. I'm not 100% clear on how the "merging" of configs works.

Thanks!

This is my extra-webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    optimization: {
        minimizer: [new TerserPlugin({
            parallel: true,
            cache: true,
            terserOptions: {
                ecma: undefined,
                warnings: false,
                parse: {},
                compress: {
                    warnings: false, // Suppress uglification warnings
                    pure_getters: true,
                    unsafe: true,
                    unsafe_comps: true
                },
                mangle: true, // Note `mangle.properties` is `false` by default.
                module: false,
                output: null,
                toplevel: false,
                nameCache: null,
                ie8: false,
                keep_classnames: undefined,
                keep_fnames: false,
                safari10: false
            }
        })]
    }
};

[just-jeb]

Have you specified merge strategy replace for optimization? You might want to take a look at this comment.
Regarding viewing the final webpack config - not possible without changing the sources. I'm considering adding a debug or verbose option. Would be useful to me as well as to the users.

[RyanHow]

Thanks so much!. Worked like a charm. You are a legend.

[Xambey]

The merge strategy no longer works, you should use a similar approach:

module.exports = (config, options) => {
    config.optimization.minimizer.filter (({constructor: {name}}) => name === 'TerserPlugin')
        .forEach (terser => terser.options.terserOptions.keep_fnames = true);

    return config;
};

The default config for Angular 8:

[
  HashedModuleIdsPlugin {
    options: {
      context: null,
      hashFunction: 'md4',
      hashDigest: 'base64',
      hashDigestLength: 4
    }
  },
  BundleBudgetPlugin {options: {budgets: [Array]}},
  CleanCssWebpackPlugin {
    _options: {sourceMap: true, test: [Function: test]}
  },
  TerserPlugin {
    options: {
      test: /\.m?js(\?.*)?$/i,
      chunkFilter: [Function: chunkFilter],
      warningsFilter: [Function: warningsFilter],
      extractComments: false,
      sourceMap: true,
      cache: true
      cacheKeys: [Function: cacheKeys],
      parallel: true
      include: undefined,
      exclude: undefined,
      minify: undefined,
      terserOptions: [Object]
    }
  },
  TerserPlugin {
    options: {
      test: /\.m?js(\?.*)?$/i,
      chunkFilter: [Function: chunkFilter],
      warningsFilter: [Function: warningsFilter],
      extractComments: false,
      sourceMap: true,
      cache: true
      cacheKeys: [Function: cacheKeys],
      parallel: true
      include: undefined,
      exclude: undefined,
      minify: undefined,
      terserOptions: [Object]
    }
  }
]

IMPORTANT!!!! :
Angular ignores terserOptions settings if differential loading (
browserlist must be equals:

0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11
not samsung 4
not android 4.4.3-4.4.4
not last 2 ie_mob versions
not last 2 op_mini versions
not last 2 op_mob versions
not last 2 baidu versions
not last 2 kaios versions
not last 2 and_uc versions
not last 2 and_qq versions
not last 2 edge versions
not chrome 49

) is enabled and target in tsconfig is higher than es5

Default config

[Zundrium]

@Xambey Your current example seems to work, however when I change it to keep_classnames it does not retain the class names. Any idea what might be the cause?

[Xambey]

@Zundrium during the study of the sources it was found that specifically for Terser plugins, the builder ignores the mangling settings, all you can do is turn it off completely. You can read more here (read all correspondence)

[Zundrium]

@Xambey Alright, thanks.

[just-jeb]

So, for any newcomers a short recap of what's been discussed here and researched in the sources.

In order to change the minimizer settings you have to change the configuration of TerserPlugin. Nothing complicated, just the old good custom-webpack builder, read the docs.

HOWEVER, in order for these changes to be applied the differentialLoading must be switched off.
To do this you can either:

1. Completely drop the support for es5 by modifying browserlist file (only allow browsers that support es6).
2. Compile your code to es5 instead of es6, which will effectively support older versions of browsers but increase bundle size. This can be done by setting the target in tsconfig.json to es5 or not setting it at all (es5 is the default option for Angular).

Background:
After the webpack build is done Angular is doing its own post-processing which disregards TerserPlugin options and does stuff like mangling in any case.