using es6 with webpack and babel

Question

When I run npm start (dev) Babel is ok, so I can use es6 code. But when I try to npm run-script build (prod) it not using babel nor es6 isn't recognized. This is my package.json and webpack-production.config.js:

{
  "name": "public",
  "version": "1.0.0",
  "description": "",
  "main": "boot.js",
  "scripts": {
    "start": "webpack",
    "build": "webpack -p --config webpack-production.config.js",
    "dev": "webpack "
  },
  "author": "Adevcom",
  "license": "ISC",
  "devDependencies": {
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-preset-stage-1": "^6.16.0",
    "babel-preset-stage-2": "^6.18.0",
    "babel-preset-stage-3": "^6.17.0",
    "webpack": "^1.13.3"
  },
  "dependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2016": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-runtime": "^6.18.0",
    "browserify": "^13.1.1",
    "envify": "^3.4.1",
    "fbjs": "^0.8.5",
    "flux": "^2.1.1",
    "highcharts": "^5.0.7",
    "ion-rangeslider": "^2.1.4",
    "keymirror": "^0.1.1",
    "object-assign": "^4.1.0",
    "react": "^15.3.2",
    "react-cookie": "^0.4.7",
    "react-dom": "^15.3.2",
    "react-dropzone": "^3.7.3",
    "react-dropzone-component": "^1.2.0",
    "react-gemini-scrollbar": "^2.1.5",
    "react-infinite": "^0.10.0",
    "react-maskedinput": "^3.2.0",
    "react-router": "^2.8.1",
    "reactify": "^1.1.1",
    "uglify-js": "^2.7.4",
    "watchify": "^3.7.0"
  },
  "browserify": {
    "transform": [
      "reactify",
      "envify"
    ]
  }
}

And:

var webpack = require('webpack');
var path = require('path');
module.exports = {
    entry:['babel-polyfill',path.resolve(__dirname, "./boot.js") ] ,
    output: {
        path: __dirname,
        filename: "bundle.js"
    }, 
    plugins: [
        new webpack.DefinePlugin({
              'process.env':{
                'NODE_ENV': JSON.stringify('produccion'),
                'TEMPORAL_PARAM': JSON.stringify('AGREGA AQUI TUS PARAMETROS PRODUCCION')
              }
            }),
              new webpack.optimize.UglifyJsPlugin({minimize: true})
            ],
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    },
    devtool: 'source-map',
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.join(__dirname, ''),

                exclude: /node_modules/,
                 query: {
                  presets: ['es2016', 'react']
                }
              }



        ]
    }
};

Any idea why is this happening? thanks in advice.

Well, and this is webpack.congi.js where es6 works:

var webpack = require('webpack');
var path = require('path');
module.exports = {
    entry:[path.resolve(__dirname, "./boot.js") ] ,
    output: {
        path: __dirname,
        filename: "bundle.js"
    }, 
    plugins: [
        new webpack.DefinePlugin({
            'process.env':{
                'NODE_ENV': JSON.stringify('development'),
                'TEMPORAL_PARAM': JSON.stringify('AGREGA AQUI TUS PARAMETROS DESARROLLO'),
                'AAAAA': JSON.stringify('hola mundo desde webpack')
            }
        })
    ],
    watch:true,
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    },
  //  devtool: 'source-map',
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.join(__dirname, ''),

                exclude: /node_modules/,
                query: {
                    presets: ['es2016', 'react']
                }
            }
        ]
    }
};

Answer 1

Your Babel config will need to be changed from

['es2016', 'react']

to

['es2015', 'es2016', 'react']

and install babel-preset-es2015 with

npm install --save-dev babel-preset-es2015

Uglify does not support ES6, so you need es2015 to compile ES6 to ES5. es2016 just compiles the new features added in ES2016.

Update:

These days, using babel-preset-env is a better choice than using the year-based presets. I'd recommend doing:

presets: [
  ['env', {
    targets: {
      uglify: 2,
    }
  }],
]

to compile all modern JS functionality, while ensuring that the output will be compatible with Uglify 2.x.

Answer 2

Thanks loganfsmyth, for the answer.

In my case I should change:

['stage-1', 'react']

to

['es2015', 'stage-1', 'react']

(May would be helpful for someone who use stage-1 and don't understand what's going on here :) )