webpack 2: ERROR in ./public/bundle.js from UglifyJs Unexpected character '`'

Question

I got 2 related issues:

First: when I run npm run build the bundle.js file is not minified but I do get a bundle.js.map file.

Second: when I run webpack -d I only get a minified bundle.js file (and no error) but when I run webpack -p then I get a bundle.js that is not minified, a bundle.js.map, and those errors:

ERROR in ./public/bundle.js from UglifyJs
Unexpected character '`' [./app/config.js:5,0][./public/bundle.js:76,14]

ERROR in ./public/bundle.js from UglifyJs
Unexpected character '`' [./app/config.js:5,0][./public/bundle.js:76,14]

My question(s):

1. shouldn't the behaviors of webpack -p and webpack -d be the opposite?
2. why is bundle.js not minified when I run npm run build?
3. why do I get those Unexpected character errors when I use template strings in my modules?

package.json looks like that:

{
  ...,
  "scripts": {
    "build": "webpack --progress --watch"
  },
  "devDependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015-native-modules": "^6.9.4",
    "eslint": "^3.3.1",
    "eslint-config-airbnb": "^10.0.1",
    "eslint-plugin-html": "^1.5.2",
    "eslint-plugin-import": "^1.13.0",
    "eslint-plugin-jsx-a11y": "^2.1.0",
    "eslint-plugin-react": "^6.1.2",
    "webpack": "^2.1.0-beta.21"
  }
}

while webpack.config.js is like that:

const webpack = require('webpack'); // eslint-disable-line import/no-extraneous-dependencies

const nodeEnv = process.env.NODE_ENV || 'production';

module.exports = {
  entry: {
    filename: './app/app.js'
  },
  output: {
    filename: './public/bundle.js'
  },
  modules: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015-native-modules']
        }
      }
    ]
  },
  devtool: 'source-map',
  plugins: [
    // uglify
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false },
      output: { comments: false },
      sourceMap: true
    }),
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
    })
  ]
};

I did search both here and Google (and webpack docs…) but I can't find anything useful to me. Thanks!!

Answer 1

UglifyJS2 does not have ES6/Harmony support in its releases yet. However, there's the Harmony branch which allows you to minify/uglify files with ES6 syntax.

I can suggest you an alternative solution which could help you spend less build time to transpile all ES6 to ES5.

Simply specify UglifyJs in your package.json, and let npm handles the dependencies. "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony-v2.8.22",