Comment réduire le code ES6 à l'aide de Webpack?

Question

Je suis en utilisant webpack et que vous souhaitez déployer mon site. Si je minifier et bundle mon code JavaScript, j'ai cette erreur:

Parse error: jeton Inattendu: nom (enButton)

Voici ma fourni le code:

'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;
    }
}

Note combinées de code, le mot-clé export est supprimé. Dans le développement, il n'y a pas d'erreurs de levée. Vous trouverez ici mon fichier de configuration de 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,
            },
        })
    ] : []
};

Si je change PROD de faux, je n'ai pas d'erreur, si vrai, j'ai une erreur à partir de ci-dessus. Ma question est puis-je activer ES6 dans Webpack?

Answer 1

Vous ne savez pas si vous cherchez toujours une réponse à cette question, mais vous pouvez maintenant inclure la version bêta de uglifyjs-webpack-plugin en tant que plug-in Webpack et il utilisera uglify-es, qui peut réduire le code ES6.

 npm install uglifyjs-webpack-plugin
 

et ensuite dans votre webpack.config.js:

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

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

Answer 2

Juste venu pour savoir que uglifyjs-webpack-plugin également ne pas rapetisser l'ES6 code plus. Ils ont commencé à le faire dans certaines versions, mais alors uglify-es ils ont utilisé n'est plus maintenu, donc ils ont reculé à la uglify-js qui ne prend pas en charge ES6 minification. Tous les Détails ici

Si vous voulez rapetisser ES6 code, veuillez jeter un oeil à terser-webpack-plugin

terser est un fork de uglify-es qui conserve de l'API et de la CLI de compatibilité avec uglify-es et uglify-js@3.

Installer le plugin avec NPM via:

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

ou avec fil:

yarn add -D terser-webpack-plugin

Ensuite, ajouter le plugin dans la dans la optimization section de votre webpack config:

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

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

Answer 3

Ayant ce défaut webpack config:

> 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

le suivant a fonctionné pour moi avec un esnext cible:

npm i -D uglifyjs-webpack-plugin

ce qui donne le maintenant local 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
]

Reportez-vous à la responsable de messages:

• Est ES6+ pris en charge ou pas?
• Reste paramètres qui ne sont pas reconnus

Answer 4

Utiliser uglifyjs-webpack-plugin@1.2.2 résout mon problème.

Aussi, dans mon webpack.config.js

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