Example of replacing the minimizer

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]

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.

[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.