How can webpack terser avoid mangling jQuery methods?

500 views Asked by At

When using webpack 5 with Terser mangle options. We must keep mangling enabled in production for business reasons on this project.

 optimization: {
            minimize: true,
            minimizer: [
                new TerserPlugin({
                    parallel: true,
                    terserOptions: {
                        toplevel: true,
                        mangle: {
                            properties: {
                                keep_quoted: true,
                                debug: true,
                            },                       
                        },
                    }
                }),
       ]
}

I'm leaving the debug:true option for the ease of exemplifying the issue.

Having jQuery loaded externally (think Shopify or other env where we access jQuery from the window context).

// $ is global, via webpack externs 
this.jTitle = $('title').first();

Becomes

// $ is global, via webpack externs 
this._$jTitle$_=$("title")._$first$_()

I want it to become

// $ is global, via webpack externs 
this._$jTitle$_=$("title").first()

This happens in all the codebase, breaking the bundle, and I cannot create a functioning bundle.

Update:

A repo that exemplifies the issue is here (branch name is important, beware! example-import-problem is the branch that has the issue): https://github.com/vladnicula/terser-for-the-win/tree/example-import-problem

Demo problem

0

There are 0 answers