如何使用 Webpack 缩小 ES6 代码?

Question

我正在使用 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，我就会从上面得到错误。我的问题是我可以在 Webpack 中启用 ES6 吗？

Answer 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()
]
};

Answer 2

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

如果你想缩小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

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

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
//...
optimization: {
minimizer: [new TerserPlugin()]
}
};

Answer 3

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

查看相关维护者的帖子：

• 是否支持 ES6+？
• 无法识别其余参数

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')]
}
}