Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expose mangle option for UglifyJsPlugin #148

Closed
Kezino opened this issue Aug 30, 2017 · 2 comments · Fixed by #152
Closed

Expose mangle option for UglifyJsPlugin #148

Kezino opened this issue Aug 30, 2017 · 2 comments · Fixed by #152

Comments

@Kezino
Copy link

Kezino commented Aug 30, 2017

Greetings!

Came across the problem of AgularJs minification. Some third party modules are not minified correctly with mangle option enabled. It throws error like Error: Unknown provider: tProvider <- t. Unfortunately, there is no way to disable mangle via Encore interface. Please, add the option. Thank you in advance!

P.S. For those, experiencing the same problem, here's how I solved it:

...

let config = Encore.getWebpackConfig(),
    webpack = require('webpack');

if (Encore.isProduction()) {
    let index;

    config.plugins.forEach((plugin, i) => {
        if (plugin instanceof webpack.optimize.UglifyJsPlugin) {
            index = i;
        }
    });

    if (index) {
        config.plugins.splice(index, 1);
    }

    config.plugins.push(new webpack.optimize.UglifyJsPlugin({
        mangle: false,
        sourceMap: !Encore.isProduction()
    }));
}
@Lyrkan
Copy link
Collaborator

Lyrkan commented Aug 30, 2017

Hi @Kezino,

There is indeed some work that still needs to be done related to plugins configuration. In this case we'd probably need an Encore.configureUglifyJsPlugin(callback) method, I'll see what I can do for that one.

Your workaround can also be a little bit simplified since you only want to modify a single option of that plugin (no need to remove and add the plugin and its other options again):

if (Encore.isProduction()) {
    for (const plugin of config.plugins) {
        if (plugin instanceof webpack.optimize.UglifyJsPlugin) {
            plugin.options.mangle = false;
        }
    }
}

@stof
Copy link
Member

stof commented Aug 30, 2017

Disabling mangling will impact the size of the production build a lot. This is a bad idea.

what you should do instead is making your Angular code mangling-safe (i.e. not relying on parameter names for guessing the dependency at runtime). There is https://github.com/schmod/babel-plugin-angularjs-annotate which is the recommended way to do this guessing during the Babel compilation instead, turning the code into a explicitly-configured injection rather than a guessed one (while still writing it using guessing).
This is a must-have for an Angular project if you rely on argument names to configure the injection.

weaverryan added a commit that referenced this issue Sep 14, 2017
This PR was squashed before being merged into the master branch (closes #152).

Discussion
----------

Add various methods to configure default plugins

This PR adds some methods to configure default plugins (closes #148, closes #87 and closes #15):

* `Encore.configureDefinePlugin(callback)`
* `Encore.configureExtractTextPlugin(callback)`
* `Encore.configureFriendlyErrorsPlugin(callback)`
* `Encore.configureLoaderOptionsPlugin(callback)`
* `Encore.configureUglifyJsPlugin(callback)`

Other changes:

* Allows the `clean-webpack-plugin` to be configured using `Encore.cleanupOutputBeforeBuild(paths, callback)`
* Fixed a small mistake in the `Encore.configureManifestPlugin()` jsdoc
* Reorganized flags/callbacks in the constructor of `webpack.config.js` since it was starting to be a bit hard to read. I'm not sure about the way I splitted things though, let me know what you think about it.
* Renamed `common-chunks.js` to `commons-chunks.js` since the name of the plugin is `CommonsChunkPlugin`

@weaverryan: Not directly related but while doing all of that I noticed that `sassOptions` uses snake-case whereas I used camel-case in #144 for `enablePreactPreset()` and in #115 for `configureRuntimeEnvironment()`, should we do something about that?

***Edit 1:** Added `Encore.configureCleanWebpackPlugin()`*
***Edit 2:** Removed `Encore.configureCleanWebpackPlugin()` to use `Encore.cleanupOutputBeforeBuild(paths, callback)` arguments instead*

Commits
-------

286787a Minor text changes
f72614b Remove configureCleanWebpackPlugin and use cleanupOutputBeforeBuild arguments instead
90c8565 Add various methods to configure default plugins
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants