vue webpack uglify - arrow functions

Question

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

Possible duplicate of Arrow Function syntax not working with webpack? — Roy J
– Roy J, Commented Sep 29, 2017 at 21:14

Quoc-Anh Nguyen · Accepted Answer · 2017-09-30 02:08:39Z

0

Right now, UglifyJsPlugin doesn't support ES6 feature (arrow function) so you must use babel first to compile your ES6 code to ES5 then use UglifyJsPlugin in it

answered Sep 30, 2017 at 2:08

Quoc-Anh Nguyen

5,0961 gold badge25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nagy.zsolt.hun Over a year ago

How can I use babel with vue-loader?

Quoc-Anh Nguyen Over a year ago

First, you have to install babel-loader and create its config. Then in your webpack config, create new rule for js to use babel (you doesn't need to edit vue-loader config because it will auto-detect the presence babel-loader and use it

Collectives™ on Stack Overflow

vue webpack uglify - arrow functions

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related