webpack -p error: ERROR in bundle.js from UglifyJs

Question

I am using webpack version 3.2.0.
webpack command is working fine but webpack -p raises below error stack.

ERROR in bundle.js from UglifyJs
Unexpected character '`' [bundle.js:1168,19]

My file contains backtick in javascript file.

 `<div style="display: table; width: 100%; height: 100%;">
     <div style="display: table-cell; vertical-align: middle;text-align: center;width: 100%;">
       <button class="w2ui-btn" id="alloc_fund_save_btn">Save</button>
     </div>
  </div>`

Here is my webpack.config.js

const path = require('path');
var webpack = require('/usr/local/lib/node_modules/webpack');

config = {
    // define entry point
    entry: "./src/index.js",

    // define output point
    output: {
        path: path.resolve(__dirname, ''), // no need to create folder
        filename: 'bundle.js'
    },
    module: {
      rules: [{
              test: require.resolve('./jquery.min.js'),
              use: [{
                  loader: 'expose-loader',
                  options: 'jQuery'
              },{
                  loader: 'expose-loader',
                  options: '$'
              }]
          }]
    }
};

module.exports = config;

Is there any plugin that I am missing to integrate with my config.

Any help would be appreciated.

Answer 1

The problem is that UglifyjsWebpackPlugin doesn't support minification of ES6 code.

You should add babel loader or change uglify-js dependency manually. I recommend you to use babel loader.

From UglifyjsWebpackPlugin docs:

Important! The plugin has a peer dependency to uglify-js, so in order to use the plugin, also uglify-js has to be installed. The currently (2017/1/25) available uglify-js npm packages; however, do not support minification of ES6 code. In order to support ES6, an ES6-capable, a.k.a. harmony, version of UglifyJS has to be provided. If your minification target is ES6: yarn add git://github.com/mishoo/UglifyJS2#harmony-v2.8.22 --dev