display bug after minified

[miaulightouch]

minify tools like uglify, babel-minify would cause console output lost some argument.

ref: debug-js/debug#547

[bduerring]

Also referencing: debug-js/debug#547, we noted that our debug entries were logging colors instead of the variables defined:

log-entry: HLS source: color: #33CC99 +7ms

Per @ibc's comment, we updated our webpack to utilize TerserPlugin as follows:

module.exports = {
....
optimization: {
    minimizer: [new TerserPlugin()] //overrides UglifyJsPlugin which was causing issues with debug in production
},

We currently have the updated build in QA for testing prior to deploying, but it appears to have resolved the issue, below is a sample of the same debug entry after the build:

log-entry: HLS source:https://cdn.com/file.mp4/playlist.m3u8 +1ms

We're slightly concerned about the migration to a new minifier and how it could impact other functionality, so it would be nice if debug works with the default UglifyJSPlugin in the future to mitigate issues.

Thanks!

[miaulightouch]

The terser github page says

terser is a fork of uglify-es that retains API and CLI compatibility with uglify-es and uglify-js@3.

And the next version of webpack had Switch from uglifyjs-webpack-plugin (uglify-es) to terser-webpack-plugin (terser)

It should be good to use terser to resolve this issue.

then I totally agree @Qix-, because uglifyjs cause the unexpected result.