DEV Community

Discussion on: Customizing Angular CLI 6 build  - an alternative to ng eject

Collapse
 
felipecarrillo100 profile image
felipecarrillo100

Hi,

If you see the
node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js

You can see it requests

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

Then it is configured in the same file a bit further.

I'm using a 3rd party tool that requires setting the uglifyOptions.compress.unused to false.
Since the default is true I have some issues with this library.

My objective is to use extra-webpack.config.js

to modify and add the uglifyOptions compress "unused" to false. Could you give me some guidance on how to get there?

    compress: {
        pure_getters: buildOptions.buildOptimizer,
        // PURE comments work best with 3 passes.
        // See https://github.com/webpack/webpack/issues/2899#issuecomment-317425926.
        passes: buildOptions.buildOptimizer ? 3 : 1,
        // Workaround known uglify-es issue
        // See https://github.com/mishoo/UglifyJS2/issues/2949#issuecomment-368070307
        inline: wco.supportES2015 ? 1 : 3,

unused:false
}

Thread Thread
 
jeb profile image
JeB

In your plugins section add UglifyJSPlugin with compress.unused set to false.

If Angular CLI uses this plugin, your configuration will take preference and will override the compress.unused of the default UglifyJSPlugin.

Thread Thread
 
jeb profile image
JeB • Edited

@felipecarrillo100 , here are few insights:

  1. Since this commit they are using TerserPlugin instead of UglifyJsPlugin.
  2. In current implementation you cannot override the instance of a specific plugin inside minimizer array. Plugins merge was implemented for plugins array but not for the rest. If you'd like this functionality to be added, please open a feature request on github. PR is also welcome.
  3. If you need it now and don't have time to wait for this feature the only option you have is overriding the whole optimization entry. For this you have to:
    • Specify optimization: replace in mergeStrategies object in builder configuration
    • Define all the optimization configuration as it is defined in Angular along with your modifications inside your extra-webpack.config.js. Angular optimization definitions can be found in
node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js  

and in

node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js.
Thread Thread
 
jeb profile image
JeB

You can do it easily now with version 7.4.1. Just export a function in your config file, it will receive the original config and expected to return a modified config. You can do whatever you like with the config that you receive.