9

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!!

Yann
  • 604
  • 2
  • 7
  • 16

1 Answers1

6

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",

Burak Tasci
  • 887
  • 12
  • 18
  • One note: with node's module resolution algorithim you can really just add the dev dep for the uglifyharmony branch to your dev deps. If you are really worried about an overlap you can also just script the removal of a secondary with something like ```find node_modules/webpack -name "uglify*" | xargs rm -Rf``` - just fewer forks to manage ;) – ShortCircuit Dec 04 '16 at 17:39
  • I agree, forking all entire webpack is not a reliable solution. However, npm resolution algorithm might have different behaviors depending to npm version. On the other hand, bebraw just published [uglifyjs-webpack-plugin](https://github.com/webpack-contrib/uglifyjs-webpack-plugin) plugin so that you can use/configure UglifyJs decoupled from webpack. – Burak Tasci Feb 07 '17 at 09:45