When building a Vue project including arrow functions, webpack's UglifJsPlugin gives this error:
Unexpected token: operator (>)
example:
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: my question was marked as duplicate of this:
Arrow Function syntax not working with webpack?
1) it has nothing to do with Vue
2) it is about using arrow functions as class member, wheres my question is not
