2

I'm using webpack with Symfony 3.x and created a JS file with a function called by a third-party plugin on an event. When webpack minifies the file it changes the name of the function, so it can no longer be called on the event by its name. How can mangling of the function name be avoided?

// Source JS file to be minified by webpack require('./plugin'); function elementRemoved(data) { }

CodePlayer
  • 49
  • 1
  • 4
  • You can set https://github.com/webpack-contrib/uglifyjs-webpack-plugin#uglifyoptions mangle: false. But a better way is defining a global variable to use on your app. See https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack – Leo Caseiro Jun 01 '18 at 02:06
  • Thank you for the clue, I've read the information by the links carefully, however I can't figure out how to define global functions, I've tried: function elementRemoved(data) { }; export {elementRemoved}; - in 'export' file globals.js, and: import './globals'; - in source file for compilation. This doesn't work. – CodePlayer Jun 01 '18 at 02:30
  • try `export function elementRemoved(data) { };` and `import elementRemoved from './globals';` – Leo Caseiro Jun 01 '18 at 02:41
  • I've tried - it doesn't work. The function itself is not making it to the output file. I tried to have: `export function elementRemoved(data) {alert('examplehere') };`, and `import elementRemoved from './globals';`, and wasn't able to find 'examplehere' in the output file, while the plugin `require('.plugin');` gets compiled. – CodePlayer Jun 01 '18 at 02:51
  • Are you using the ProvidePlugin https://webpack.js.org/plugins/provide-plugin/? – Leo Caseiro Jun 01 '18 at 05:47
  • No. Perhaps I'm doing something incorrectly: file **globals.js**: `export function elementRemoved(data) {alert('examplehere') };`, file **app.js**: `require('.plugin'); import elementRemoved from './globals';`, and resulting file **/build/app.js** doesn't contain string 'examplehere', but includes compiled plugin. – CodePlayer Jun 01 '18 at 13:32

0 Answers0