如何使用Webpack缩小ES6代码? [英] How to minify ES6 code using Webpack?

问题描述

我正在使用webpack，并希望部署我的网站.如果我缩小并捆绑JavaScript代码，就会出现此错误:

I'm using webpack and want to deploy my site. If I minify and bundle my JavaScript code, I've got this error:

解析错误:意外的令牌:名称(Button)

Parse error: Unexpected token: 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配置文件:

Note in bundled code the keyword export is removed. In development, there are no errors thrown. Here you could find my configuration file of 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，则上面有错误.我的问题是可以在Webpack中启用ES6吗?

If I change PROD to false, I've no error, if true I've got error from above. My question is can I enable ES6 in Webpack?

推荐答案

不确定您是否仍在寻找答案，但是现在您可以包括

Not sure if you're still looking for an answer to this, but now you can include the beta version of uglifyjs-webpack-plugin as a webpack plugin and it'll use uglify-es which can minify ES6 code.

npm install uglifyjs-webpack-plugin

，然后在您的webpack.config.js中:

and then in your webpack.config.js:

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

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

这篇关于如何使用Webpack缩小ES6代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！