How to setup UglifyJsPlugin to mangle variables using regex in angular 4.0

Question

I want to uglify Angualr 4 output files file and mangle specific variables which start with my_ . The command line below does the exact thing I want. I just want to be able to tell uglifyJs plugin in angular-cli's webpack to do the same thing.

> uglifyjs script.js --source-map "filename='script.js.map',includeSources,content=inline" -o script.js -m
-c toplevel --mangle-props \"regex=/^my_[^_]{1}/\" --name-cache uglify-name-cache.json

Currently I export the webpack.config.js from angular-cli with eject command. But I just can't find any documentation on how to tell uglifyJsplugin of the autogenerated file the regex and name-cache parameters. Both of those are critical for our application.

From webpack.config.js produced by eject command:

new UglifyJsPlugin({
  "test": /\.js$/i,
  "extractComments": false,
  "sourceMap": true,
  "cache": false,
  "parallel": false,
  "uglifyOptions": {
    "output": {
      "ascii_only": true,
      "comments": false
    },
    "ecma": 5,
    "warnings": false,
    "ie8": false,
    "mangle": true,
    "compress": {}
  }
}),

Here is blog post about how to use angualr eject to capture the auto-generated weppack.config and modify it. Angular-cli : How to ignore class names from being minified But can't find anything on how to specify the regex for the ugllify plugin

Thanks in advance.

Some other helpful info:

 "dependencies": {
    "@angular/common": "4.4.6",
    "@angular/compiler": "4.4.6",
    "@angular/core": "4.4.6",
    "@angular/http": "4.4.6",
    "@angular/platform-browser": "4.4.6",
    "@angular/platform-browser-dynamic": "4.4.6",
    "@angular/router": "4.4.6",   },   
 "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler-cli": "4.4.6",
    "@types/node": "7.0.43",
    "clean-webpack-plugin": "0.1.17",
    "codelyzer": "3.2.2",
    "copy-webpack-plugin": "4.2.0",
    "uglify-js": "3.1.8",
    "webpack": "3.8.1"   
 }

The webpack.config that is auto generated by the angular eject command is really big. Most of it is irrelevant. The part that configures the uglifyjs plugin is what I cut out and pasted above. Is there anything else you like to see? — David Dehghan
– David Dehghan, Commented Nov 10, 2017 at 6:28

David Dehghan · Accepted Answer · 2017-11-27 01:39:49Z

There was a bug in webpack-uglifyjs plugin which did not transmit the nameCache value to the uglifyjs. This bug is fixed in ver 1.1.0.

The nameCache will have to be crated and then saved to a file with another plugin.

This goes into webpack.config.js:

   const WriteNameCachePlugin = require(‘./write-name-cache-plugin’);
    var nameCache = JSON.parse(fs.readFileSync(path.join(process.cwd(),“uglify-name-cache.json”), “utf8"));

...

    new UglifyJsPlugin({
      “test”: /\.js$/i,
      “extractComments”: false,
      “sourceMap”: true,
      “cache”: false,
      “parallel”: false,
      “uglifyOptions”: {
        “output”: {
          “ascii_only”: true,
          “comments”: false
        },
        “ecma”: 5,
        “warnings”: false,
        “ie8": false,
        “nameCache”: nameCache,
        “mangle”: {
          properties: {
              regex: /^my_[^_]{1}/,
              reserved: [“$”, “_”]
          }
        },
        “compress”: {}
      }
    }),
...

This goes into write-name-cache-plugin.js

   const fs = require(‘fs’);

   var opt;

   function WriteNameCachePlugin(options) {
        opt = options;
    }


   WriteNameCachePlugin.prototype.apply = function(compiler) {
        compiler.plugin(‘done’, function() {
            fs.writeFileSync(opt.fileName, JSON.stringify(opt.nameCache, null, 4), “utf8");
        });
    };

   module.exports = WriteNameCachePlugin;

Rach Chen · Accepted Answer · 2017-11-10 06:58:25Z

0

Webpack is provided uglify og optimize,use it but I'm not guaranteed it works as you.

const {optimize} = require("webpack")

new optimize.UglifyJsPlugin({
    beautify: false,
    output: {
      comments: false
    },
    mangle: {
      screw_ie8: true
    },
    compress: {
      screw_ie8: true,
      warnings: false,
      conditionals: true,
      unused: true,
      comparisons: true,
      sequences: true,
      dead_code: true,
      evaluate: true,
      if_return: true,
      join_vars: true,
      negate_iife: false
    }
  })

answered Nov 10, 2017 at 6:58

Rach Chen

1,4122 gold badges12 silver badges28 bronze badges

1 Comment

David Dehghan Over a year ago

unfortunately it wont work. I need to be able to pass both regex and name-cache to uglifyjs through the plugin. I am uglifying several files and the names have to stay consistent across them. That is why I need name-cache parameter set

Collectives™ on Stack Overflow

How to setup UglifyJsPlugin to mangle variables using regex in angular 4.0

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related