Webpack ne convertit pas ES6 en ES5

Je suis très nouveau sur Webpack. Je pense que je vais le faire de manière incorrecte. Je voudrais convertir une fonction ES6 en fonction ES5 en utilisant babel. J'ai donc fait quelques recherches et j'ai trouvé babel-loader. Cependant, je ne suis pas sûr de ce que je fais.

J'ai lancé npm install babel-loader --save-dev et il a été ajouté à mon paquet.json

// paquet.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 - je viens d'ajouter une fonction inutile aléatoire dans la syntaxe ES6. J'espérais, je vais voir le format ES5 dans mon bundle.fichier js mais il n'a pas changé. C'est toujours la syntaxe ES6 en bundle.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/composant.js

module.exports = function() {
  var element = document.createElement('h1');
  element.innerHTML = 'hello world';
  return element;
};