Webpack no convierte ES6 a ES5

Soy muy nuevo en Webpack. Creo que lo estoy haciendo incorrectamente. Me gustaría convertir una función ES6 a la función ES5 usando babel. Así que investigué un poco y encontré babel-loader. Sin embargo, no estoy seguro de lo que estoy haciendo.

Ejecuté npm install babel-loader save save-dev y se agregó a mi paquete.json

// paquete.json 

{
  "name": "kanban",
  "version": "1.0.0",
  "description": "kanban",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.3.21",
    "babel-loader": "^6.2.0",
    "html-webpack-plugin": "^1.7.0",
    "json-loader": "^0.5.4",
    "webpack": "^1.12.9"
  }
}

/ / webpack.config.js 

var path = require('path');
var HtmlwebpackPlugin =  require('html-webpack-plugin');

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build')
};

module.exports = {
  entry: PATHS.app,
  output: {
    path: PATHS.build,
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Kanban app'
    })
  ],
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader' }
    ]
  }
};

// app/index.js - Acabo de añadir alguna función inútil al azar en la sintaxis ES6. Tenía la esperanza de ver el formato ES5 en mi paquete.archivo js pero no cambió. Todavía es sintaxis ES6 en paquete.js 

var component = require('./component');
var app = document.createElement('div');
document.body.appendChild('app');
app.appendChild(component());

let myJson = {
  prop: 'myProp'
};

let fives = [];
nums = [1, 2, 5, 15, 25, 32];

// Statement bodies
nums.forEach(function (v) {
  if (v % 5 === 0) {
    fives.push(v);
  }
}, this);

console.log(fives);

let sum = (a, b) => a + b;

/ / app / component.js 

module.exports = function() {
  var element = document.createElement('h1');
  element.innerHTML = 'hello world';
  return element;
};
Author: loganfsmyth, 2015-12-22
Source

2 answers

Si quieres compilar ES6 a ES5 necesitas instalar Babel ES2015 preset.

npm install babel-preset-es2015

Entonces necesita habilitar este preset. Una forma de habilitar esta compilación de ES6 a ES5 es usando babel-loader cadena de consulta: 

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader?presets[]=es2015'
      }
    ]
  }

O opción de consulta: 

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
 32
Author: dreyescat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-23 18:19:13

Para webpack 3, las opciones del módulo deberían parecerse a

module: {
  rules: [
    {
       use: {
          loader:'babel-loader',
          options: { presets: ['es2015'] }
       },
       test: /\.js$/,
       exclude: /node_modules/
    }
  ]
},

Esto todavía requiere babel-loader y babel-preset-es2015

 9
Author: PhilVarg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-17 12:03:09