vue webpack uglify - 箭头函数

Question

在构建包含箭头函数的 Vue 项目时，webpack 的 UglifJsPlugin 出现此错误：

Unexpected token: operator (>)

示例：

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

注意：我的问题被标记为与此重复： Arrow Function syntax not working with webpack?
1) 与 Vue 无关
2）它是关于使用箭头函数作为类成员，我的问题不是

Answer 1

目前UglifyJsPlugin 不支持 ES6 特性（箭头函数），所以你必须先使用 babel 将你的 ES6 代码编译为 ES5，然后在其中使用 UglifyJsPlugin