Почему код из npm пакета `highlight.js` не хочет аглифицироваться на продакшене? Как это исправить?

Question

[Влад]

В main.js импортирую в числе других импортов highlight.js:

import hljs from 'highlight.js';
hljs.highlightAll();

Прогоняю в Галпе весь JS-код через Webpack:

...
.pipe(webpackStream({
            mode: `${(devMode === true) ? 'development' : 'production'}`, // translate our mode for webpack
            output: {
                filename: `${path.build.jsOutput}`,  // specify just one output file
            },
            module: {
                rules: [
                    {
                        test: /\.(js)$/,    // get all the js-files
                        exclude: /(node_modules)/, // exclude development modules folder
                        loader: 'babel-loader', // convert ES6 into a backwards compatible version of JS
                        query: {
                            presets: ['@babel/env'] // use babel preset
                        }
                    },
                ]
            },
            optimization: {
                minimizer: [
                  new UglifyJsPlugin({      // minify JS
                    uglifyOptions: {
                      output: {
                        comments: false,    // disable even special comments
                      },
                    },
                  }),
                ],
            }
        })).on('error', function handleError() {
            this.emit('end')
        })
...

Когда ставлю на продакшен, в консоли вижу:

ERROR in main.js from UglifyJs
Unexpected token: name «Response», expected: punc «;» [main.js:22946,6]

Опытным путём определяю, что это `highlight.js`.

Как это исправить? Не цеплять же с cdn :(

https://www.npmjs.com/package/highlight.js

Comments

[Александр]

Попробуйте https://webpack.js.org/plugins/terser-webpack-plugin/.

[Влад]

Ваша правда! Совсем забыл про terser.
Если его в пятый вебпак включили по дефорту, это говорит о многом. С четвёркой пришлось повозиться.
Если говорить о совместимости пакетов касательно сборки через Gulp 4 + Webpack 4, то необходимо использовать такие версии и патчи:

"devDependencies":  {
    "gulp": "^4.0.2",
    "terser-webpack-plugin": "^4.2.3",
    "webpack": "^4.46.0",
    "webpack-stream": "^6.1.1"
}

И если не хотите получить в к js аутпут файлу практически метр на продакшене, то советую выбирать необходимые вам языки для подсветки синтаксиса. Я себе так отметил в точке входа:

// IMPORTANT!
// To reduce javascript output file size we import like that:

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript'; // import JS highlighting
hljs.registerLanguage('javascript', javascript); // import XML highlighting
import xml from 'highlight.js/lib/languages/xml';
hljs.registerLanguage('xml', xml);
hljs.highlightAll();

100% работает.

К пятому webpack-у пока не готов. Времени нет :)