如何使用Webpack缩小ES6代码？

Question

我正在使用webpack并想部署我的网站.如果我缩小并捆绑我的JavaScript代码,我有这个错误:

解析错误:意外的令牌:name(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,我没有错误,如果是,我从上面得到错误.我的问题是我可以在Webpack中启用ES6吗？

Answer 1

不确定你是否还在寻找答案,但现在你可以将uglifyjs-webpack-plugin的beta版本作为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()
    ]
};

Answer 2

刚认识到这uglifyjs-webpack-plugin也不再缩小ES6代码.他们开始在某些版本中这样做,但随后uglify-es他们使用的不再维护,所以他们回到了uglify-js不支持ES6缩小.完整细节在这里

如果您想缩小ES6代码,请查看terser-webpack-plugin

terser是uglify-es的一个分支,它保留了与uglify-es和uglify-js @ 3的API和CLI兼容性.

通过NPM安装插件:

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

或用纱线:

yarn add -D terser-webpack-plugin

然后,在optimizationwebpack配置的部分中添加插件:

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

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