Switch from uglifyjs-webpack-plugin to terser-webpack-plugin #8036

edmorley · 2018-09-15T00:42:04Z

Some history:

uglifyjs-webpack-plugin < v1.0 used the minifier uglify-js
however uglify-js does not support ES6, which resulted in a fork called uglify-es that was developed in the uglify-js repository, but under the harmony branch
uglifyjs-webpack-plugin v1.x switched to uglify-es for ES6 support
however uglify-es stopped being maintained
which led to a fork called terser that has incorporated all of the unmerged PRs and will be where all new development occurs
terser-webpack-plugin was created, which is the terser equivalent of uglifyjs-webpack-plugin
uglifyjs-webpack-plugin v2.x has switched back to uglify-js, so any project that needs to support ES6 now needs to switch to terser-webpack-plugin instead.

Fixes #7923.

What kind of change does this PR introduce?

Bugfix (since terser includes many correctness fixes) but also breaking change (see below).

Did you add tests for your changes?

There are existing tests which have been updated for the plugin name change.

Does this PR introduce a breaking change?

Yes. The new plugin:

requires the minifier options to be passed under terserOptions, rather than the previous uglifyOptions.
has changed the method signature that should be used when specifying a warningsFilter function.

What needs to be documented once your changes are merged?

The defaults listed for optimization.minimizer will need updating (and also made to link to the terser plugin docs instead)

webpack-bot · 2018-09-15T00:42:07Z

For maintainers only:

This need to be documented (issue in webpack/webpack.js.org will be filed when merged)

webpack-bot · 2018-09-15T01:08:31Z

Thank you for your pull request! The most important CI builds succeeded, we’ll review the pull request soon.

sokra · 2018-09-15T10:49:45Z

test/__snapshots__/StatsTestCases.test.js.snap

-WARNING in UglifyJs Plugin: Dropping unused function someUnRemoteUsedFunction4 [./a.js:6,0] in bundle.js
-
-WARNING in UglifyJs Plugin: Dropping unused function someUnRemoteUsedFunction5 [./a.js:7,0] in bundle.js"
+[2] (webpack)/buildin/module.js 497 bytes {0} [built]"


Could you rename test/statsCases/warnings-uglifyjs too?

I also wonder why this snapshot differs?

I also wonder why this snapshot differs?

It seems that the warnings message format is slightly different between the two plugins:
https://github.com/webpack-contrib/uglifyjs-webpack-plugin/blob/v1.3.0/src/index.js#L121
https://github.com/webpack-contrib/terser-webpack-plugin/blob/v1.1.0/src/index.js#L150

@evilebottnawi is this expected?

@edmorley yep

webpack-bot · 2018-09-15T11:24:17Z

@edmorley Thanks for your update.

I labeled the Pull Request so reviewers will review it again.

@sokra Please review the new changes.

Some history: * `uglifyjs-webpack-plugin` < v1.0 used the minifier `uglify-js` * however `uglify-js` does not support ES6, which resulted in a fork called `uglify-es` that was developed in the `uglify-js` repository, but under the `harmony` branch * `uglifyjs-webpack-plugin` v1.x switched to `uglify-es` for ES6 support * however `uglify-es` stopped being maintained: mishoo/UglifyJS#3156 (comment) * which led to a fork called `terser` that has incorporated all of the unmerged PRs and will be where all new development occurs: https://github.com/fabiosantoscode/terser * `terser-webpack-plugin` was created, which is the `terser` equivalent of `uglifyjs-webpack-plugin`: https://github.com/webpack-contrib/terser-webpack-plugin * `uglifyjs-webpack-plugin` v2.x will be switching back to `uglify-js`, so any project that needs to support ES6 now needs to switch to `terser-webpack-plugin`. Fixes #7923.

edmorley · 2018-09-16T09:46:53Z

Ah good spot on the warningsFilter signature change - thank you for adding a fix.

webpack-bot · 2018-09-16T10:23:03Z

I've created an issue to document this in webpack/webpack.js.org.

sokra · 2018-09-16T10:23:06Z

Thanks

) * docs(config): Replace UglifyJSPlugin references with TerserPlugin Since the default `options.minimizer` is now `terser-webpack-plugin`: webpack/webpack#8036 I've also: * updated the custom `minimizer` example to include all of the default options, to reduce the chance people forget to enable them. * removed the `optimize/UglifyJsPlugin` reference, since it's no longer included in the webpack repository. * removed the "Here are a few more popular ones" mention, since it's not accurate (they aren't more popular). * removed manual plugin configuration from `configuration-languages.md` since the defaults for `minimizer` make it unnecessary. Fixes #2520. * Address review comment

## Types of changes  - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change) ## Description Webpack requires `uglifyjs-webpack-plugin@1.x`. thus `uglifyjs-webpack-plugin@2.x` may not resolve correctly. Also, the webpack team decided to go with `terser-webpack-plugin` (webpack/webpack#8036). ## Checklist:    - [ ] My change requires a change to the documentation. - [ ] I have updated the documentation accordingly. (PR: #) - [ ] I have added tests to cover my changes (if not applicable, please state why) - [ ] All new and existing tests passed.

For the same reasons as webpack/webpack#8036 Webpack will switch to terser by default for 5.x

Webpack has moved to Terser so it feels like the documentation here should too webpack/webpack#8036

The `mode` option needs to be added to webpack config: https://webpack.js.org/migrate/4#mode CommonsChunkPlugin is replaced by new config: https://webpack.js.org/migrate/4#commonschunkplugin https://webpack.js.org/configuration/optimization/#optimizationsplitchunks CleanWebpackPlugin uses webpack's `output.path` by default, so use the default configuration: johnagan/clean-webpack-plugin#106 UglifyjsWebpackPlugin is replaced with TerserWebpackPlugin, which is now webpack's default minimizer: https://webpack.js.org/plugins/terser-webpack-plugin/#terseroptions webpack/webpack#8036 Unfortunately karma-webpack 4.0.0 isn't released yet, so a release candidate is used instead.

The `mode` option needs to be added to webpack config: https://webpack.js.org/migrate/4#mode CommonsChunkPlugin is replaced by new config: https://webpack.js.org/migrate/4#commonschunkplugin https://webpack.js.org/configuration/optimization/#optimizationsplitchunks https://webpack.js.org/plugins/split-chunks-plugin/#split-chunks-example-2 CleanWebpackPlugin uses webpack's `output.path` by default, so use the default configuration: johnagan/clean-webpack-plugin#106 UglifyjsWebpackPlugin is replaced with TerserWebpackPlugin, which is now webpack's default minimizer: https://webpack.js.org/plugins/terser-webpack-plugin/#terseroptions webpack/webpack#8036 Unfortunately karma-webpack 4.0.0 isn't released yet, so a release candidate is used instead.

webpack-bot added PR: unreviewed PR: next labels Sep 15, 2018

webpack-bot added the PR: CI-ok label Sep 15, 2018

sokra requested changes Sep 15, 2018

View reviewed changes

webpack-bot added PR: reviewed-changes-requested PR: conflict and removed PR: unreviewed PR: CI-ok PR: reviewed-changes-requested labels Sep 15, 2018

webpack-bot added the PR: review-outdated label Sep 15, 2018

edmorley added 2 commits September 15, 2018 12:29

Rename test directories too

dd19dc0

webpack-bot added PR: CI-ok and removed PR: conflict labels Sep 15, 2018

fix for changed API in terser plugin warningsFilter

a94d043

sokra approved these changes Sep 16, 2018

View reviewed changes

webpack-bot added PR: reviewed-approved and removed PR: review-outdated labels Sep 16, 2018

sokra merged commit b7128d8 into webpack:next Sep 16, 2018

webpack-bot mentioned this pull request Sep 16, 2018

Document webpack change: Switch from uglifyjs-webpack-plugin to terser-webpack-plugin webpack/webpack.js.org#2520

Closed

edmorley deleted the use-terser-webpack-plugin branch September 16, 2018 12:05

edmorley mentioned this pull request Sep 16, 2018

docs(config): Replace UglifyJSPlugin references with TerserPlugin webpack/webpack.js.org#2522

Merged

jogold mentioned this pull request Sep 18, 2018

Switch to terser and terser-webpack-plugin goldwasserexchange/public#50

Closed

pi0 mentioned this pull request Sep 20, 2018

hotfix: use terser-webpack-plugin nuxt/nuxt#3928

Merged

7 tasks

edmorley mentioned this pull request Sep 27, 2018

Switch to terser-webpack-plugin neutrinojs/neutrino#1146

Closed

DorianGrey mentioned this pull request Oct 1, 2018

Replace uglifyjs-webpack-plugin with terser-webpack-plugin vuejs/vue-cli#2245

Closed

renchap mentioned this pull request Oct 1, 2018

Switch to terser-webpack-plugin for JS minification rails/webpacker#1719

Closed

jakemarsden added a commit to jakemarsden/aikido-track that referenced this pull request Oct 11, 2018

Replace uglifyjs-webpack-plugin with terser-webpack-plugin

2e60ec1

For the same reasons as webpack/webpack#8036 Webpack will switch to terser by default for 5.x

edmorley mentioned this pull request Oct 19, 2018

Switch from uglifyjs-webpack-plugin (uglify-es) to terser-webpack-plugin (terser) #7923

Closed

robertaird mentioned this pull request Oct 23, 2018

switched to terser-webpack-plugin from uglifyjs-webpack-plugin react-boilerplate/react-boilerplate#2396

Merged

miaulightouch mentioned this pull request Oct 27, 2018

display bug after minified LightouchDev/debug-es#2

Closed

Limess mentioned this pull request Nov 1, 2018

Webpack JS config Financial-Times/dotcom-page-kit#6

Closed

sokra mentioned this pull request Nov 14, 2018

Ensure webpack users don't unknowingly use uglify-es #8350

Closed

vkrol mentioned this pull request Nov 18, 2018

Cherry-pick terser to webpack 4 #8392

Merged

webpack-bot mentioned this pull request Nov 19, 2018

Document webpack change: Cherry-pick terser to webpack 4 webpack/webpack.js.org#2656

Closed

banyan mentioned this pull request Nov 29, 2018

Use terser-webpack-plugin instead of uglifyjs-webpack-plugin rails/webpacker#1816

Merged

abenezerabebe mentioned this pull request Dec 4, 2018

Move from uglifyjs-webpack-plugin to terser-webpack-plugin webpack/webpack-cli#704

Closed

jakeNiemiec mentioned this pull request Jan 15, 2019

ES6 syntax fails to compile even on a clean new app with --webpack=stimulus rails/webpacker#1285

Closed

shiftkey mentioned this pull request Jan 17, 2019

investigate Terser use for minification desktop/desktop#6652

Closed

brophdawg11 mentioned this pull request Feb 1, 2019

Switch to Terser for minification to fix safari 10 issue brophdawg11/vue-ssr-build#31

Merged

hectorgrebbell added a commit to hectorgrebbell/mini-css-extract-plugin that referenced this pull request Mar 8, 2019

Update default JS minimizer to Terser

9f3b9ac

Webpack has moved to Terser so it feels like the documentation here should too webpack/webpack#8036

hectorgrebbell mentioned this pull request Mar 8, 2019

Update default JS minimizer to Terser webpack-contrib/mini-css-extract-plugin#360

Closed

foolip mentioned this pull request May 13, 2019

Upgrade webpack and related packages GoogleChromeLabs/confluence#392

Merged

saitolume mentioned this pull request Sep 4, 2019

Replace uglifyjs-webpack-plugin to terser-webpack-plugin euxn23/webpacker-pure-config#1

Merged

1 task

pravi mentioned this pull request Sep 13, 2020

Is Harmony still considered experimental? lautis/uglifier#142

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Switch from uglifyjs-webpack-plugin to terser-webpack-plugin #8036

Switch from uglifyjs-webpack-plugin to terser-webpack-plugin #8036

edmorley commented Sep 15, 2018 •

edited

Loading

webpack-bot commented Sep 15, 2018 •

edited by sokra

Loading

webpack-bot commented Sep 15, 2018

sokra Sep 15, 2018

sokra Sep 15, 2018

edmorley Sep 15, 2018

alexander-akait Sep 15, 2018

webpack-bot commented Sep 15, 2018

edmorley commented Sep 16, 2018

webpack-bot commented Sep 16, 2018

sokra commented Sep 16, 2018

Switch from uglifyjs-webpack-plugin to terser-webpack-plugin #8036

Switch from uglifyjs-webpack-plugin to terser-webpack-plugin #8036

Conversation

edmorley commented Sep 15, 2018 • edited Loading

webpack-bot commented Sep 15, 2018 • edited by sokra Loading

webpack-bot commented Sep 15, 2018

sokra Sep 15, 2018

Choose a reason for hiding this comment

sokra Sep 15, 2018

Choose a reason for hiding this comment

edmorley Sep 15, 2018

Choose a reason for hiding this comment

alexander-akait Sep 15, 2018

Choose a reason for hiding this comment

webpack-bot commented Sep 15, 2018

edmorley commented Sep 16, 2018

webpack-bot commented Sep 16, 2018

sokra commented Sep 16, 2018

edmorley commented Sep 15, 2018 •

edited

Loading

webpack-bot commented Sep 15, 2018 •

edited by sokra

Loading