Replace UglifyJS with Terser (#2656) (#2658)

Author: vkrol

src/content/api/cli.md

@@ -245,7 +245,7 @@ Parameter                   | Explanation
 --------------------------- | -------------------------------------------------------|----------------------
 `--optimize-max-chunks`     | Try to keep the chunk count below a limit              | [LimitChunkCountPlugin](/plugins/limit-chunk-count-plugin)
 `--optimize-min-chunk-size` | Try to keep the chunk size above a limit               | [MinChunkSizePlugin](/plugins/min-chunk-size-plugin)
-`--optimize-minimize`       | Minimize javascript and switches loaders to minimizing | [UglifyJsPlugin](/plugins/uglifyjs-webpack-plugin/) & [LoaderOptionsPlugin](/plugins/loader-options-plugin/)
+`--optimize-minimize`       | Minimize javascript and switches loaders to minimizing | [TerserPlugin](/plugins/terser-webpack-plugin/) & [LoaderOptionsPlugin](/plugins/loader-options-plugin/)
 
 
 ### Resolve Options

src/content/comparison.md

@@ -36,7 +36,7 @@ webpack is not the only module bundler out there. If you are choosing between us
 | Indirect require `var r = require; r("./file")` | __yes__ | no♦ | no | no | no | |
 | Load each file separate | no | yes | no | yes | no | no |
 | Mangle path names | __yes__ | no | partial | yes | not required (path names are not included in the bundle) | no |
-| Minimizing | uglify | uglify, closure compiler | [uglifyify](https://github.com/hughsk/uglifyify) | yes | [uglify-plugin](https://github.com/TrySound/rollup-plugin-uglify) | [UglifyJS-brunch](https://github.com/brunch/uglify-js-brunch)
+| Minimizing | terser | uglify, closure compiler | [uglifyify](https://github.com/hughsk/uglifyify) | yes | [uglify-plugin](https://github.com/TrySound/rollup-plugin-uglify) | [UglifyJS-brunch](https://github.com/brunch/uglify-js-brunch)
 | Multi pages build with common bundle | with manual configuration | __yes__ | with manual configuration | with bundle arithmetic | no | no|
 | Multiple bundles | __yes__ | with manual configuration | with manual configuration | yes | no | yes |
 | Node.js built-in libs `require("path")` | __yes__ | no | __yes__ | __yes__ | [node-resolve-plugin](https://github.com/rollup/rollup-plugin-node-resolve) | |

src/content/concepts/mode.md

@@ -39,7 +39,7 @@ The following string values are supported:
 Option                | Description
 --------------------- | -----------------------
 `development`         | Sets `process.env.NODE_ENV` on `DefinePlugin` to value `development`. Enables `NamedChunksPlugin` and `NamedModulesPlugin`.
-`production`          | Sets `process.env.NODE_ENV` on `DefinePlugin` to value `production`. Enables `FlagDependencyUsagePlugin`, `FlagIncludedChunksPlugin`, `ModuleConcatenationPlugin`, `NoEmitOnErrorsPlugin`, `OccurrenceOrderPlugin`, `SideEffectsFlagPlugin` and `UglifyJsPlugin`.
+`production`          | Sets `process.env.NODE_ENV` on `DefinePlugin` to value `production`. Enables `FlagDependencyUsagePlugin`, `FlagIncludedChunksPlugin`, `ModuleConcatenationPlugin`, `NoEmitOnErrorsPlugin`, `OccurrenceOrderPlugin`, `SideEffectsFlagPlugin` and `TerserPlugin`.
 `none`                | Opts out of any default optimization options
 
 If not set, webpack sets `production` as the default value for `mode`. The supported values for mode are:
@@ -123,7 +123,7 @@ module.exports = {
 -   minimize: true,
 - },
 - plugins: [
--   new UglifyJsPlugin(/* ... */),
+-   new TerserPlugin(/* ... */),
 -   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
 -   new webpack.optimize.ModuleConcatenationPlugin(),
 -   new webpack.NoEmitOnErrorsPlugin()

src/content/configuration/configuration-languages.md

@@ -120,7 +120,6 @@ config =
     use: 'babel-loader'
   } ]
   plugins: [
-    new (webpack.optimize.UglifyJsPlugin)
     new HtmlWebpackPlugin(template: './src/index.html')
   ]
 
@@ -169,10 +168,6 @@ export default (
       }} />
     </resolve>
     <plugins>
-      <uglify-js opts={{
-        compression: true,
-        mangle: false
-      }} />
       <CustomPlugin foo="bar" />
     </plugins>
   </webpack>

src/content/configuration/configuration-types.md

@@ -31,8 +31,10 @@ One option is to export a function from your webpack config instead of exporting
 +    mode: env.production ? 'production' : 'development',
 +    devtool: env.production ? 'source-maps' : 'eval',
      plugins: [
-       new webpack.optimize.UglifyJsPlugin({
-+        compress: argv['optimize-minimize'] // only if -p or --optimize-minimize were passed
+       new TerserPlugin({
+         terserOptions: {
++          compress: argv['optimize-minimize'] // only if -p or --optimize-minimize were passed
+         }
        })
      ]
 +  };

src/content/configuration/devtool.md

@@ -114,4 +114,4 @@ W> You should not deploy the Source Map file to the webserver. Instead only use
 
 W> It still exposes filenames and structure for decompiling, but it doesn't expose the original code.
 
-T> When using the `uglifyjs-webpack-plugin` you must provide the `sourceMap: true` option to enable SourceMap support.
+T> When using the `terser-webpack-plugin` you must provide the `sourceMap: true` option to enable SourceMap support.

src/content/configuration/optimization.md

@@ -20,7 +20,7 @@ Since version 4 webpack runs optimizations for you depending on the chosen  [`mo
 
 `boolean`
 
-Tell webpack to minimize the bundle using the [UglifyjsWebpackPlugin](/plugins/uglifyjs-webpack-plugin/).
+Tell webpack to minimize the bundle using the [TerserPlugin](/plugins/terser-webpack-plugin/).
 
 This is `true` by default in `production` mode.
 
@@ -40,21 +40,21 @@ T> Learn how [mode](/concepts/mode/) works.
 
 ## `optimization.minimizer`
 
-`[UglifyjsWebpackPlugin]`
+`[TerserPlugin]`
 
-Allows you to override the default minimizer by providing a different one or more customized [UglifyjsWebpackPlugin](/plugins/uglifyjs-webpack-plugin/) instances.
+Allows you to override the default minimizer by providing a different one or more customized [TerserPlugin](/plugins/terser-webpack-plugin/) instances.
 
 __webpack.config.js__
 
 
 ```js
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
   //...
   optimization: {
     minimizer: [
-      new UglifyJsPlugin({ /* your config */ })
+      new TerserPlugin({ /* your config */ })
     ]
   }
 };

src/content/guides/build-performance.md

@@ -148,9 +148,9 @@ Be aware of the performance differences of the different `devtool` settings.
 
 ### Avoid Production Specific Tooling
 
-Certain utilities, plugins, and loaders only make sense when building for production. For example, it usually doesn't make sense to minify and mangle your code with the `UglifyJsPlugin` while in development. These tools should typically be excluded in development:
+Certain utilities, plugins, and loaders only make sense when building for production. For example, it usually doesn't make sense to minify and mangle your code with the `TerserPlugin` while in development. These tools should typically be excluded in development:
 
-- `UglifyJsPlugin`
+- `TerserPlugin`
 - `ExtractTextPlugin`
 - `[hash]`/`[chunkhash]`
 - `AggressiveSplittingPlugin`

src/content/guides/integrations.md

@@ -10,7 +10,7 @@ contributors:
 
 Let's start by clearing up a common misconception. webpack is a module bundler like [Browserify](http://browserify.org/) or [Brunch](http://brunch.io/). It is _not a task runner_ like [Make](https://www.gnu.org/software/make/), [Grunt](https://gruntjs.com/), or [Gulp](https://gulpjs.com/). Task runners handle automation of common development tasks such as linting, building, or testing your project. Compared to bundlers, task runners have a higher level focus. You can still benefit from their higher level tooling while leaving the problem of bundling to webpack.
 
-Bundlers help you get your JavaScript and stylesheets ready for deployment, transforming them into a format that's suitable for the browser. For example, JavaScript can be [minified](/plugins/uglifyjs-webpack-plugin) or [split into chunks](/guides/code-splitting) and [lazy-loaded](/guides/lazy-loading) to improve performance. Bundling is one of the most important challenges in web development, and solving it well can remove a lot of pain from the process.
+Bundlers help you get your JavaScript and stylesheets ready for deployment, transforming them into a format that's suitable for the browser. For example, JavaScript can be [minified](/plugins/terser-webpack-plugin) or [split into chunks](/guides/code-splitting) and [lazy-loaded](/guides/lazy-loading) to improve performance. Bundling is one of the most important challenges in web development, and solving it well can remove a lot of pain from the process.
 
 The good news is that, while there is some overlap, task runners and bundlers can play well together if approached in the right way. This guide provides a high-level overview of how webpack can be integrated into some of the more popular task runners.
 

src/content/guides/production.md

@@ -102,7 +102,7 @@ __webpack.prod.js__
 + });
 ```
 
-In `webpack.common.js`, we now have setup our `entry` and `output` configuration and we've included any plugins that are required for both environments. In `webpack.dev.js`, we've set ``mode`` to ``development``. Also, we've added the recommended `devtool` for that environment (strong source mapping), as well as our simple `devServer` configuration. Finally, in `webpack.prod.js`,``mode`` is set to ``production`` which loads `UglifyJSPlugin` which was first introduced by the [tree shaking](/guides/tree-shaking) guide.
+In `webpack.common.js`, we now have setup our `entry` and `output` configuration and we've included any plugins that are required for both environments. In `webpack.dev.js`, we've set ``mode`` to ``development``. Also, we've added the recommended `devtool` for that environment (strong source mapping), as well as our simple `devServer` configuration. Finally, in `webpack.prod.js`,``mode`` is set to ``production`` which loads `TerserPlugin` which was first introduced by the [tree shaking](/guides/tree-shaking) guide.
 
 Note the use of `merge()` in the environment-specific configurations to easily include our common configuration in `dev` and `prod`. The `webpack-merge` tool offers a variety of advanced features for merging but for our use case we won't need any of that.
 
@@ -195,7 +195,7 @@ __src/index.js__
 
 webpack v4+ will minify your code by default in [`production mode`](/concepts/mode/#mode-production).
 
-Note that while the [`UglifyJSPlugin`](/plugins/uglifyjs-webpack-plugin) is a great place to start for minification and being used by default, there are other options out there. Here are a few more popular ones:
+Note that while the [`TerserPlugin`](/plugins/terser-webpack-plugin) is a great place to start for minification and being used by default, there are other options out there. Here are a few more popular ones:
 
 - [`BabelMinifyWebpackPlugin`](https://github.com/webpack-contrib/babel-minify-webpack-plugin)
 - [`ClosureCompilerPlugin`](https://github.com/roman01la/webpack-closure-compiler)
@@ -229,6 +229,6 @@ It is crucial to minimize your CSS on production, please see [Minimizing for Pro
 
 ## CLI Alternatives
 
-Some of what has been described above is also achievable via the command line. For example, the `--optimize-minimize` flag will include the `UglifyJSPlugin` behind the scenes. The `--define process.env.NODE_ENV="'production'"` will do the same for the `DefinePlugin` instance described above. And, `webpack -p` will automatically invoke both those flags and thus the plugins to be included.
+Some of what has been described above is also achievable via the command line. For example, the `--optimize-minimize` flag will include the `TerserPlugin` behind the scenes. The `--define process.env.NODE_ENV="'production'"` will do the same for the `DefinePlugin` instance described above. And, `webpack -p` will automatically invoke both those flags and thus the plugins to be included.
 
 While these short hand methods are nice, we usually recommend just using the configuration as it's better to understand exactly what is being done for you in both cases. The configuration also gives you more control on fine tuning other options within both plugins.