Vue webpack enlaidir - Fonctions fléchées

Question

Lors de la construction d'un projet Vue y compris les fonctions de direction, de UglifJsPlugin webpack donne cette erreur:

Unexpected token: operator (>) 

exemple:

app.js

import Vue from 'vue'; 
import HelloWorldComponent from "./HelloWorld.vue"; 

new Vue({ 
    el: '#app' 
    ,render: r => r(HelloWorldComponent) 
}); 

HelloWorld.vue

<template> 
    <div>{{message}}</div> 
</template> 

<script> 
const data = { message: "Hello World" } 
export default { 
    data() { return data } 
} 
</script> 

webpack.config.js

const webpack = require('webpack'); 
const path = require("path"); 
const HtmlPlugin = require("html-webpack-plugin"); 
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); 

const output = { 
    path: path.resolve(__dirname, 'build'), 
    filename: 'app.js' 
}; 
const vueLoaderRule = { 
    test: /\.vue$/, 
    loader: 'vue-loader' 
}; 
const uglifyJsPlugin = new UglifyJsPlugin({ 
    include: /\.js$/, 
    minimize: true 
}); 

module.exports = { 
    entry: './app.js' 
    ,output: output 
    ,module: {rules: [ vueLoaderRule ]} 
    ,plugins: [ uglifyJsPlugin ] 
} 

Note: ma question a été marquée comme double de celle-ci: Arrow Function syntax not working with webpack?
1) il n'a rien à voir avec Vue
2) il est sur l'utilisation des fonctions de direction en tant que membre de la classe , wheres ma question ne

Answer 1

en ce moment, UglifyJsPlugin ne supporte pas fonction ES6 (fonction de flèche) vous devez donc utiliser babel premier à compiler votre code ES6 à ES5 puis utilisez UglifyJsPlugin dans ce