webpack丑化-箭头函数

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