Webpack UglifyJS running into unexpected token

Question

I am trying to set up a development boilerplate which can also easily push a Vue.js project to NPM.

I am running into a problem with my webpack.prod.js file, the error is:

ERROR in build.js from UglifyJs
Unexpected token: operator (>)

The code to uglify is:

// minify with dead-code elimination
new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
    }
})

This is my project and the exact file where it seems to go wrong:

https://github.com/stephan-v/vue-inline-svg/blob/master/webpack/webpack.prod.js

The project uses Babel to transpile to ES6 and Webpack to compile to UMD format when I run npm run production. This command uses the webpack.prod.js configuration.

I am probably not seeing something that could be fixed easily but I have no clue what is going wrong here.

Answer 1

Using the .babelrc file from the webpack simple repository fixed my issue. I am not sure what is going on here though:

{
    "presets": [
        ["env", { "modules": false }]
    ]
}

To my knowledge the .babelrc contains the plugins and options that tells babel how to transpile my code.

I revied what the modules option exactly is:

https://babeljs.io/docs/plugins/preset-env/#optionsmodules

It said the following:

"amd" | "umd" | "systemjs" | "commonjs" | false, defaults to "commonjs".

Enable transformation of ES6 module syntax to another module type.

Setting this to false will not transform modules.

Because I want my package to be available to all users and my webpack production configuration uses:

libraryTarget: 'umd'

To compile my code to umd formatting, will this not conflict with "modules": false though?

I am also used to seeing a es2015 preset in the .babelrc file. This is nowhere to be found. Is this the default now?

It seems the es2015 option has been entirely removed:

https://github.com/vuejs-templates/webpack/commit/424cd3f6d101ffeb57f48bca55d7951b35af60e0

From what I've read so far it is because Webpack 2 already knows how to work with ES6 modules natively therefore the "modules": false disables and prevents babel from transpiling as well.

Feel free to leave a comment and correct me on any of this. I am saving this for future reference and for others to see who might also stumble into this.