webpack build xxx.vue error when use UglifyJs

Question

I use webpack build vue and use UglifyJs,but its error,for this:

ERROR in index.js from UglifyJs
SyntaxError: Unexpected token punc «(», expected punc «:» [index.js:386,6]

hello.vue code like this:

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

webpack.config.js code like this:

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        babel: {
            babelrc: false,
            presets: ['es2015', "stage-2"],
            plugins: ['babel-plugin-transform-runtime']
        }
}
...

new webpack.optimize.UglifyJsPlugin({
    sourceMap: false,
    mangle: false,
    compress: {
        warnings: false
        drop_console: true
    }
})

package.json code for this:

"dependencies": {
    "autoprefixer": "^6.6.1",
    "babel": "^6.5.2",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-2": "^6.18.0",
    "cross-env": "^3.1.4",
    "css-loader": "^0.26.1",
    "html-loader": "^0.4.4",
    "sass-loader": "^4.1.1",
    "url-loader": "^0.5.7",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^10.0.2",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.8",
    "webpack": "^2.1.0-beta.25",
    "webpack-dev-server": "^2.1.0-beta.9",
    "vue": "^2.1.8"
}

After build,the code like this:

/* harmony default export */ exports["default"] = {
  name: 'app',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  }
};

I found after build, hellow.vue file to index.js,its code ES6 doesnt to ES5,so UglifyJs is error. I tried all the methods, but it failed. Please help me,thanks.

Answer 1

I just solved this issue myself. To apply babel to .vue files as well you must not specify babel options inside your webpack.config.js but inside a .babelrc file instead.

1) Remove the options property from the vue-loader entirely so it looks like this:

{
  test: /\.vue$/,
  loader: 'vue-loader'
}

2) Create a .babelrc file in your project root (next to package.json and webpack.config.js) with the following content:

{
  "presets": [
    ["es2015"],
    ["stage-2"]
  ],
  "plugins": ["babel-plugin-transform-runtime"],
  "comments": false
}

But beware: this is a JSON5 file, not an ordinary JSON file or JavaScript file!

---

I'm not sure if your options.babel: {} approach is supposed to work but the .babelrc approach is used by the official vue-cli templates and it also works for my custom setup.

Answer 2

I came across the same issue, and I don't want to implement .babelrc.

Firstly your webpack config isn't in the format recognized by vue-loader:

test: /\.vue$/,
loader: 'vue-loader',
options: {
    babel: {
        babelrc: false,
        presets: ['es2015', "stage-2"],
        plugins: ['babel-plugin-transform-runtime']
    }
}

After reading the Vue-loader advanced configuration, I was using the following:

test: /\.vue$/, 
loader: 'vue-loader', 
options: {
    loaders: {
        js: 'babel-loader'
    }
}

I read that the vue-loader detects babel-loader, so I figured it would detect the same configuration, unfortunately not. My babel-loader looks like this:

test: /\.js$/, 
loader: 'babel-loader', 
options: {
    plugins: ['transform-runtime', 'transform-object-rest-spread'],
    presets: ['es2015']
}

I came across no way to specify the loader except just via string. So I tried the webpack 1.x string options format, and it worked!:

test: /\.vue$/, 
loader: 'vue-loader', 
options: {
    loaders: {
        js: 'babel-loader?presets[]=es2015&plugins[]=transform-runtime'
    }
}