如何使用 Webpack 压缩 ES6 代码？

Question

我正在使用 webpack 并想部署我的网站。如果我缩小并捆绑我的 JavaScript 代码，我会遇到这个错误：

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 配置文件：

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 吗？

Answer 1

不确定您是否仍在寻找这个问题的答案，但现在您可以包含 uglifyjs-webpack-plugin as a webpack plugin and it'll use uglify-es 的 beta 版本，它可以缩小 ES6 代码。

npm install uglifyjs-webpack-plugin

然后在你的 webpack.config.js:

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

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

Answer 2

拥有这个默认的 webpack 配置：

> npm list -g  uglifyjs-webpack-plugin
+-- 
| `-- webpack@3.10.0
|   `-- uglifyjs-webpack-plugin@0.4.6
`-- webpack@3.10.0
  `-- uglifyjs-webpack-plugin@0.4.6

以下对我有用 esnext 目标：

npm i -D uglifyjs-webpack-plugin

生成现在的本地 uglifyjs-webpack-plugin:

 > npm list  uglifyjs-webpack-plugin
 `-- uglifyjs-webpack-plugin@1.2.2

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
]

查看相关维护者的帖子：

Answer 3

刚知道 uglifyjs-webpack-plugin 也不再压缩 ES6 代码。他们在某些版本中开始这样做，但随后他们使用的 uglify-es 不再维护，因此他们退回到不支持 ES6 缩小的 uglify-js。完整详情 here

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

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

通过 NPM 安装插件：

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

或用纱线：

yarn add -D terser-webpack-plugin

然后，在 webpack 配置的 optimization 部分添加插件：

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

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

Answer 4

使用 uglifyjs-webpack-plugin@1.2.2 解决了我的问题。

此外，在我的 webpack.config.js

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

如何使用 Webpack 压缩 ES6 代码？

How to minify ES6 code using Webpack?

minify

ecmascript-6

webpack