Как минимизировать код ES6 с помощью Webpack?

Я использую webpack и хочу развернуть мой сайт. Если я минимизирую и свяжу свой код JavaScript, у меня есть эта ошибка:

Ошибка анализа: Неожиданный токен: имя (Button)

Вот мой не связанный код:

'use strict';

export class Button { // <-- Error happens on this line
    constructor(translate, rotate, text, textscale = 1) {
        this.position = translate;
        this.rotation = rotate;
        this.text = text;
        this.textscale = textscale;
    }
}

Примечание в связанном коде ключевое слово export удаляется. В разработке нет ошибок. Здесь вы можете найти файл конфигурации WebPack:

var webpack = require('webpack');

var PROD = true;

module.exports = {
    entry: "./js/entry.js",
    output: {
        path: __dirname,
        filename: PROD ? 'bundle.min.js' : 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }
        ]
    },
    plugins: PROD ? [
        new webpack.optimize.UglifyJsPlugin({
            compress: { 
                warnings: false 
            },
            output: {
                comments: false,
            },
        })
    ] : []
};

Если я изменяю PROD на false, у меня нет ошибки, если true, у меня есть ошибка сверху. Мой вопрос: могу ли я включить ES6 в Webpack?

Ответ 1

Не уверен, что вы все еще ищете ответ на этот вопрос, но теперь вы можете включить бета-версию uglifyjs-webpack-plugin в качестве плагина webpack, и он будет использовать uglify-es, который может минимизировать код ES6.

npm install uglifyjs-webpack-plugin

а затем в вашем webpack.config.js:

const Uglify = require("uglifyjs-webpack-plugin");

module.exports = {
    entry: ...,
    output: ...,
    plugins: [
        new Uglify()
    ]
};

Ответ 2

Просто узнал, что uglifyjs-webpack-plugin также не уменьшает код ES6. Они начали делать это в некоторых версиях, но затем uglify-es они использовали, больше не поддерживается, поэтому они отступили к uglify-js который не поддерживает ES6. Полная информация здесь

Если вы хотите ES6 код ES6, пожалуйста, взгляните на terser-webpack-plugin

terser - это вилка uglify-es, которая сохраняет совместимость API и CLI с uglify-es и uglify-js @3.

Установите плагин с помощью NPM через:

npm install terser-webpack-plugin --save-dev

или с пряжей:

yarn add -D terser-webpack-plugin

Затем добавьте плагин в раздел optimization вашей конфигурации webpack:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  //...
  optimization: {
    minimizer: [new TerserPlugin()]
  }
};

Ответ 3

Имея эту конфигурацию по умолчанию для webpack:

> npm list -g  uglifyjs-webpack-plugin
+-- 
| '-- [email protected]
|   '-- [email protected]
'-- [email protected]
  '-- [email protected]

для меня работала следующая цель:

npm i -D uglifyjs-webpack-plugin

создавая теперь локальный uglifyjs-webpack-plugin:

 > npm list  uglifyjs-webpack-plugin
 '-- [email protected]

webpack.config.js

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
...
plugins: [
    //new webpack.optimize.UglifyJsPlugin() @0.4.6 doesn't work
    new UglifyJSPlugin() // @1.2.2  works with esnext
]

См. Соответствующие записи сопровождающего:

Ответ 4

Использование [email protected] решает мою проблему.

Кроме того, в моем webpack.config.js

    {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
            presets: [require.resolve('babel-preset-env')]
        }
    }