Disable webpack function mangling on specific files

Question

I'm using webpack to bundle my angular app.

One of the bundled files includes all the models required by the app, the models are defined using constructor functions.

Webpack, through it's UglifyJS plugin, mangles my constructor function names which results in different complications.

I want to prevent webpack from mangling function names only on this specific asset.

Is there any way to achieve this?

Answer 1

For more detailed configuration options see

You can try to add multiple instances of the UglifyJSPlugin. One which spits out function names and one that generates mangled ones.

Use exclude/include/test to narrow down your target files for each instance!

optimization: {
        minimizer: [
            new UglifyJSPlugin({
                test: ...
                include: ...
                exclude: ...
                uglifyOptions: {
                    ecma: 5,
                    warnings: true,
                    mangle: false,
                    keep_fnames: true, <-----  keep it
                    output: {
                        beautify: true,
                        comments: true
                    }
                }
            }),
            new UglifyJSPlugin({
                test: ...
                include: ...
                exclude: ...
                uglifyOptions: {
                    ecma: 5,
                    warnings: true,
                    mangle: true,
                    keep_fnames: false,  <-- mangle them
                    output: {
                        beautify: false,
                        comments: false
                    }
                }
            })
        ]
    }