Search the Community

At the risk of being a little off gsap in this question I'm hoping anybody could help me with this. As I figured I'm probably not the only one having this situation with using gsap and webpack and wanting to mangle during minify. In Webpack I'm using babel to transpile gsap from 'gsap/all'. By imports it also going through the uglifgyjs-webpack-plugin (or uglifyjs-3-webpack-plugin or terser-webpack-plugin) perfectly fine with minifying (I tried all three webpack plugins and they have the same config-interface). I'm using this setup for months now without any problem and I am very satisfied with it, but now I want to mangle my source code and that's a different story. Enabling mangle doesn't throw problems and works, but when I set mangle.properties to true to mangle my properties things are starting to throw errors because the browser can't find things no more. The things it can't find are all inside the gsap lib and other libs like createjs I use. So what I try for days now in all kind of ways is to exclude the libs from the mangling. But so far without success. I tried putting things like 'TweenLite', 'TweenMax' and all in the reserved array (mangle.reserved) of the config object of the minifier (and also in the mangle.properties.reserved), but it doesn't seem to help or I am doing things wrong. I even tried skipping the minifier for the whole node_modules folder with a regEx property of the plugin, but I believe that's not working because uglifgyjs or terser webpack plugin only seem to minify at the very end of the buildflow, so after combining every javascript source into one file. And there seems to be no way to only minify/mangle webpack trunks before that (yet). I also tried using the regex-property inside mangle.properties (mangle.properties.regex) to only mangle properties that are important to mangle. But when I for example put a regex to mangle the property 'settings' it isn't that clever and just seems to replace all properties named 'settings', which could be totally different properties from different objects in my code. So that doesn't seem to be working as wanted or I am missing something perhaps. After days of working on this I'm kind of stuck on how to get this mangle to work. And I would be very surprised if it's not possible to leave libs out of the minifier/uglifier or having them still in but without 'can't find this and that' issues. This seems like a pretty basic workflow to me a lot of developers are probably using. I just think it's hard to believe there's nothing build in the module to get this to work, so I'm sure I'm missing something. How are other developers make mangling work on webpack without the can't find issues, like 'can't find Power4' of used libs? And I also can't find a reason why it can't find things in the mangled output, while the uglify plugin knows all code that is being used, because it's combined by webpack to one single file with everyting in there, all source code, all libs, so all references to objects and properties should be known by the mangler I'd say to mangle without problems. Perhaps webpack is making mangling more difficult, because the webpack output is pretty different, but still, this is a webpack-plugin I'm using, so it should know everything in there... Can't get my head around this. I'm stuck. So I passionately hope anybody here could give me a clue or could share their knowledge on how you guys keep gsap out of the mangle while using webpack 4! Thanks!!