Posted in Uncategorized

UglifyJsPlugin will change the class.name property

   February 23, 2021  6 Comments on UglifyJsPlugin will change the class.name property

I’m using webpack with webpack.optimize.UglifyJsPlugin on an Angular app, I’d like to use this syntax to define controller:

// in header.controller.js
class HeaderController {...}
export default HeaderController;

// in app.js
import HeaderController from './header.controller'
angular.module('app', [])
    .controller(HeaderController.name, HeaderController);

However, I found uglify will change the class name, how to disable this?

Author: Fantashit

6 thoughts on “UglifyJsPlugin will change the class.name property”

  2. @sokra That’s not the case, ng-annotate can only handle the missing dependencies, but this issue is related to function name has been mangled. I tried to use the config below:

    new webpack.optimize.UglifyJsPlugin({
    compress: {
         warnings: false,
         keep_fnames: true
    },
    mangle: {
         keep_fnames: true
    }
})

    But it can not solve this issue.

  3. Finally I found the root cause, if you use -p, the UglifyJSPlugin will mangle variables by default, even if you have another new webpack.optimize.UglifyJsPlugin in your config, so if you want to config the UglifyJSPlugin, do not use -p.

    I also file a bug on Webpack’s doc webpack/docs#49, the default mangle option for UglifyJsPlugin is not false, so if you do not want to mangle variables, you need to explicitly set this to false: new webpack.optimize.UglifyJsPlugin({mangle: false}).

  4. This issue is not AngularJS specific. I’m using webpack@1.13.0 for a React application and the mangling of class names as a default config option in for -p builds is affecting me. I don’t understand why this issue is closed with a link to a doubtful workaround applicable only to AngularJS apps.

  5. 666,it works!!! thks guys

     "webpack": "^1.12.9"

    /**
     * compress js
     */
    new webpack.optimize.UglifyJsPlugin({
        compress: {
             warnings: false
        },
        mangle: {
            except: ['$super', '$', 'exports', 'require', 'angular'],
            keep_fnames: true//it works
        }
    }),

Comments are closed.