Someguy123 Someguy123 - 7 months ago 38
Javascript Question

How do I fix Webpack from mangling my code in production?

I'm building an application using BitcoinJS, and have found that using the

-p
flag causes webpack to mangle certain parts, breaking the ability to produce transactions.

I was advised to use
noParse
with
alias
in the config, which made the problem worse (the entire application would not load at all).

So far I have not found any workaround other than turning off production (which leaves all sorts of strange things in the javascript file, including my local development paths).

Example project available here (with install instructions, and how to reproduce): https://github.com/Someguy123/example-webpack-issue

EDIT/UPDATE: @bebraw has provided a working solution, which is available on the
fixed
branch in the example project if anyone else wanted to see it in action.

Answer

The problem is that Uglify mangles too much by default in your case. As per bitcoinjs-lib instructions, you need to exclude certain names like this:

plugins: [
    new webpack.optimize.UglifyJsPlugin({
        mangle: {
            except: [
                'Array', 'BigInteger', 'Boolean', 'Buffer',
                'ECPair', 'Function', 'Number', 'Point'
            ]
        }
    })
]

Use webpack instead of webpack -p after configuring the plugin.

It will make the resulting bundle a little larger, but it will work.

Another alternative would be to generate the bundle separately for bitcoinjs-lib elsewhere and then consume that instead. You would have to take mangling into account there as well, but it would keep your project a little neater.

Comments