title: vue webpack uglify - arrow functions
body: <p>When building a Vue project including arrow functions, webpack's UglifJsPlugin gives this error:</p>
  
  <pre><code>Unexpected token: operator (&gt;)
  </code></pre>
  
  <p>example:</p>
  
  <p>app.js</p>
  
  <pre><code>import Vue from 'vue';
  import HelloWorldComponent from "./HelloWorld.vue";
  
  new Vue({
    el: '#app'
    ,render: r =&gt; r(HelloWorldComponent)
  });
  </code></pre>
  
  <p>HelloWorld.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;{{message}}&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  const data = { message: "Hello World" }
  export default {
      data() { return data }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>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 ]
  }
  </code></pre>
  
  <p>note: my question was marked as duplicate of this:
  <a href="https://stackoverflow.com/questions/42063854/arrow-function-syntax-not-working-with-webpack">Arrow Function syntax not working with webpack?</a><br>
  1) it has nothing to do with Vue<br>
  2) it is about using arrow functions as class member, wheres my question is not</p>