Question

我正在使用webpack并希望部署我的网站。如果我缩小并捆绑我的JavaScript代码，我就会收到此错误：

解析错误：意外的令牌：名称（'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

请注意，在捆绑代码中，关键字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, }, }) ] : [] };已被删除。在开发过程中，没有抛出任何错误。在这里，您可以找到我的WebPack配置文件：

PROD

如果我将{{1}}更改为false，我没有错误，如果是，我从上面得到了错误。我的问题是我可以在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。完整详细信息here

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

然后，在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
]

查看相关维护者的帖子：

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代码？

4 个答案: