如何使用Webpack对ES6代码进行缩小(minify)？

Question

如何使用Webpack对ES6代码进行缩小(minify)？

60

我正在使用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 配置文件:

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

- H. Pauwelyn

我猜你不想用Babel转译你的代码？ - Felix Kling

1

我想到了https://github.com/webpack-contrib/babili-webpack-plugin和https://www.npmjs.com/package/uglify-es（但我不知道如何将后者与webpack集成）。 - Felix Kling

4个回答

45

刚得知 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:

yarn add -D terser-webpack-plugin

接着，在您的webpack配置文件的optimization部分中添加插件：

Translated:

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

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

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

- Ajay Poshak

1

这也可以与babel ESM插件很好地配合使用，因此您可以将ES6代码发送到支持它的浏览器 :) - Fabian von Ellerts

4

有了这个默认的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
]

请查看相关维护者的帖子：

- bvj

我该如何在这个设置中使用优化器？ - shorif2000

@shorif2000 你应该能够通过构造函数传递优化选项。请查看 Github 存储库中的测试。 - bvj

1

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

此外，在我的webpack.config.js文件中：

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

- xingliang cai

这是因为uglifyjs-webpack-plugin现在在内部使用terser，它是被维护的uglify-es的分支。如果您需要手动配置terser，请改用terser-webpack-plugin。 - Coderer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user3432422 · Accepted Answer

不确定您是否仍在寻找答案，但现在您可以将beta版的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()
    ]
};