feature #425 Replace uglifyjs-webpack-plugin by terser-webpack-plugin (Lyrkan)

This PR was merged into the master branch.

Discussion
----------

Replace uglifyjs-webpack-plugin by terser-webpack-plugin

This PR replaces `uglifyjs-webpack-plugin` by `terser-webpack-plugin` since the former won't support ES6+ code anymore (closes #416).

It also removes the `configureUglifyJsPlugin()` method (well, it's still there but throws an error) and adds `configureTerserPlugin()` instead.

Commits
-------

a549c7a Replace uglifyjs-webpack-plugin by terser-webpack-plugin

Author: weaverryan

CHANGELOG.md

@@ -69,7 +69,7 @@ for a full description of all of the valid browser descriptions.
  * The `css-loader` can now be configured by calling `configureCssLoader()`.
    #335 thanks to @XWB
 
- * It's not possible to control the `exclude` for Babel so that you can
+ * It's now possible to control the `exclude` for Babel so that you can
    process certain node_modules packages  through Babel - use
    the new second argument to `configureBabel()` - #401 thanks to
    @Lyrkan.
@@ -97,9 +97,9 @@ for a full description of all of the valid browser descriptions.
  * Actual lang="sass" no longer works for Vue. However, lang="scss"
    continues to work fine.
 
- * uglifyjs-webpack-plugin was upgraded from 0.4.6 to 1.2.5, which
-   includes using `uglify-es`. If you're using `configureUglifyJsPlugin`(),
-   the options have changed.
+ * uglifyjs-webpack-plugin was replaced by terser-webpack-plugin.
+   If you're using `configureUglifyJsPlugin()`, please switch to
+   `configureTerserPlugin()` instead.
 
 ## 0.20.1
 

index.js

@@ -203,25 +203,25 @@ class Encore {
     }
 
     /**
-     * Allows you to configure the options passed to the uglifyjs-webpack-plugin.
-     * A list of available options can be found at https://github.com/webpack-contrib/uglifyjs-webpack-plugin
+     * Allows you to configure the options passed to the terser-webpack-plugin.
+     * A list of available options can be found at https://github.com/webpack-contrib/terser-webpack-plugin
      *
      * For example:
      *
-     *      Encore.configureUglifyJsPlugin((options) => {
+     *      Encore.configureTerserPlugin((options) => {
      *          options.cache = true;
-     *          options.uglifyOptions = {
+     *          options.terserOptions = {
      *              output: {
      *                  comments: false
      *              }
      *          }
      *      })
      *
-     * @param {function} uglifyJsPluginOptionsCallback
+     * @param {function} terserPluginOptionsCallback
      * @returns {Encore}
      */
-    configureUglifyJsPlugin(uglifyJsPluginOptionsCallback = () => {}) {
-        webpackConfig.configureUglifyJsPlugin(uglifyJsPluginOptionsCallback);
+    configureTerserPlugin(terserPluginOptionsCallback = () => {}) {
+        webpackConfig.configureTerserPlugin(terserPluginOptionsCallback);
 
         return this;
     }
@@ -1145,6 +1145,14 @@ class Encore {
     enableCoffeeScriptLoader() {
         throw new Error('The enableCoffeeScriptLoader() method and CoffeeScript support was removed from Encore due to support problems with Webpack 4. If you are interested in this feature, please submit a pull request!');
     }
+
+    /**
+     * @deprecated
+     * @return {void}
+     */
+    configureUglifyJsPlugin() {
+        throw new Error('The configureUglifyJsPlugin() method was removed from Encore due to uglify-js dropping ES6+ support in its latest version. Please use configureTerserPlugin() instead.');
+    }
 }
 
 // Proxy the API in order to prevent calls to most of its methods

lib/WebpackConfig.js

@@ -109,7 +109,7 @@ class WebpackConfig {
         this.friendlyErrorsPluginOptionsCallback = () => {};
         this.loaderOptionsPluginOptionsCallback = () => {};
         this.manifestPluginOptionsCallback = () => {};
-        this.uglifyJsPluginOptionsCallback = () => {};
+        this.terserPluginOptionsCallback = () => {};
         this.notifierPluginOptionsCallback = () => {};
     }
 
@@ -209,12 +209,12 @@ class WebpackConfig {
         this.manifestPluginOptionsCallback = manifestPluginOptionsCallback;
     }
 
-    configureUglifyJsPlugin(uglifyJsPluginOptionsCallback = () => {}) {
-        if (typeof uglifyJsPluginOptionsCallback !== 'function') {
-            throw new Error('Argument 1 to configureUglifyJsPlugin() must be a callback function');
+    configureTerserPlugin(terserPluginOptionsCallback = () => {}) {
+        if (typeof terserPluginOptionsCallback !== 'function') {
+            throw new Error('Argument 1 to configureTerserPlugin() must be a callback function');
         }
 
-        this.uglifyJsPluginOptionsCallback = uglifyJsPluginOptionsCallback;
+        this.terserPluginOptionsCallback = terserPluginOptionsCallback;
     }
 
     /**

lib/config-generator.js

@@ -32,7 +32,7 @@ const versioningPluginUtil = require('./plugins/versioning');
 const variableProviderPluginUtil = require('./plugins/variable-provider');
 const cleanPluginUtil = require('./plugins/clean');
 const definePluginUtil = require('./plugins/define');
-const uglifyPluginUtil = require('./plugins/uglify');
+const terserPluginUtil = require('./plugins/terser');
 const vuePluginUtil = require('./plugins/vue');
 const friendlyErrorPluginUtil = require('./plugins/friendly-errors');
 const assetOutputDisplay = require('./plugins/asset-output-display');
@@ -388,7 +388,7 @@ class ConfigGenerator {
 
         if (this.webpackConfig.isProduction()) {
             optimization.minimizer = [
-                uglifyPluginUtil(this.webpackConfig)
+                terserPluginUtil(this.webpackConfig)
             ];
         } else {
             // see versioning.js: this gives us friendly module names,

lib/plugins/uglify.js renamed to lib/plugins/terser.js

@@ -9,19 +9,19 @@
 
 'use strict';
 
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const applyOptionsCallback = require('../utils/apply-options-callback');
 
 /**
  * @param {WebpackConfig} webpackConfig
  * @return {object}
  */
 module.exports = function(webpackConfig) {
-    const uglifyJsPluginOptions = {
+    const terserPluginOptions = {
         sourceMap: webpackConfig.useSourceMaps
     };
 
-    return new UglifyJsPlugin(
-        applyOptionsCallback(webpackConfig.uglifyJsPluginOptionsCallback, uglifyJsPluginOptions)
+    return new TerserPlugin(
+        applyOptionsCallback(webpackConfig.terserPluginOptionsCallback, terserPluginOptions)
     );
 };

package.json

@@ -45,8 +45,8 @@
     "resolve-url-loader": "^2.3.0",
     "semver": "^5.5.0",
     "style-loader": "^0.21.0",
+    "terser-webpack-plugin": "^1.1.0",
     "tmp": "^0.0.33",
-    "uglifyjs-webpack-plugin": "^1.2.5",
     "webpack": "^4.20.0",
     "webpack-chunk-hash": "^0.6.0",
     "webpack-cli": "^3.0.0",

test/WebpackConfig.js

@@ -281,21 +281,21 @@ describe('WebpackConfig object', () => {
         });
     });
 
-    describe('configureUglifyJsPlugin', () => {
+    describe('configureTerserPlugin', () => {
         it('Setting callback', () => {
             const config = createConfig();
             const callback = () => {};
-            config.configureUglifyJsPlugin(callback);
+            config.configureTerserPlugin(callback);
 
-            expect(config.uglifyJsPluginOptionsCallback).to.equal(callback);
+            expect(config.terserPluginOptionsCallback).to.equal(callback);
         });
 
         it('Setting invalid callback argument', () => {
             const config = createConfig();
 
             expect(() => {
-                config.configureUglifyJsPlugin('foo');
-            }).to.throw('Argument 1 to configureUglifyJsPlugin() must be a callback function');
+                config.configureTerserPlugin('foo');
+            }).to.throw('Argument 1 to configureTerserPlugin() must be a callback function');
         });
     });
 

test/index.js

@@ -396,10 +396,10 @@ describe('Public API', () => {
 
     });
 
-    describe('configureUglifyJsPlugin', () => {
+    describe('configureTerserPlugin', () => {
 
         it('should return the API object', () => {
-            const returnedValue = api.configureUglifyJsPlugin(() => {});
+            const returnedValue = api.configureTerserPlugin(() => {});
             expect(returnedValue).to.equal(api);
         });
 

test/plugins/uglify.js renamed to test/plugins/terser.js

@@ -10,10 +10,10 @@
 'use strict';
 
 const expect = require('chai').expect;
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const WebpackConfig = require('../../lib/WebpackConfig');
 const RuntimeConfig = require('../../lib/config/RuntimeConfig');
-const uglifyPluginUtil = require('../../lib/plugins/uglify');
+const terserPluginUtil = require('../../lib/plugins/terser');
 
 function createConfig(environment = 'production') {
     const runtimeConfig = new RuntimeConfig();
@@ -24,28 +24,28 @@ function createConfig(environment = 'production') {
     return new WebpackConfig(runtimeConfig);
 }
 
-describe('plugins/uglify', () => {
+describe('plugins/terser', () => {
     it('production environment default settings', () => {
         const config = createConfig();
 
-        const plugin = uglifyPluginUtil(config);
-        expect(plugin).to.be.instanceof(UglifyJsPlugin);
+        const plugin = terserPluginUtil(config);
+        expect(plugin).to.be.instanceof(TerserPlugin);
         expect(plugin.options.sourceMap).to.equal(false);
     });
 
     it('with options callback', () => {
         const config = createConfig();
 
-        config.configureUglifyJsPlugin((options) => {
-            options.uglifyOptions = {
+        config.configureTerserPlugin((options) => {
+            options.terserOptions = {
                 output: { beautify: true }
             };
         });
 
-        const plugin = uglifyPluginUtil(config);
+        const plugin = terserPluginUtil(config);
 
         // Allows to override default options
-        expect(plugin.options.uglifyOptions.output.beautify).to.equal(true);
+        expect(plugin.options.terserOptions.output.beautify).to.equal(true);
 
         // Doesn't remove default options
         expect(plugin.options.sourceMap).to.equal(false);
@@ -54,17 +54,17 @@ describe('plugins/uglify', () => {
     it('with options callback that returns an object', () => {
         const config = createConfig();
 
-        config.configureUglifyJsPlugin((options) => {
-            options.uglifyOptions = {
+        config.configureTerserPlugin((options) => {
+            options.terserOptions = {
                 output: { beautify: true }
             };
 
             // This should override the original config
             return { cache: true };
         });
 
-        const plugin = uglifyPluginUtil(config);
-        expect(plugin.options.uglifyOptions.output.beautify).to.be.undefined;
+        const plugin = terserPluginUtil(config);
+        expect(plugin.options.terserOptions.output.beautify).to.be.undefined;
         expect(plugin.options.cache).to.equal(true);
     });
 });