Webpack not converting ES6 to ES5

Question

I'm very new to Webpack. I think I'm doing it incorrectly. I would like to convert an ES6 function to ES5 function using babel. So I did some research and I found babel-loader. However, I'm not sure what I'm doing.

I ran npm install babel-loader --save-dev and it got added into my package.json

// package.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 - I just added some random useless function in ES6 syntax. I was hoping I'll see the ES5 format in my bundle.js file but it didn't change. It's still ES6 syntax in 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/component.js

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

Answer 1

If you want to compile ES6 to ES5 you need to install Babel ES2015 preset.

npm install babel-preset-es2015 

Then you need to enable this preset. One way to enable this ES6 to ES5 compilation is using babel-loader query string:

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

or query option:

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

Answer 2

babel-preset-es2015 is deprecated. Try:

npm install -D babel-loader @babel/core @babel/preset-env webpack 

then in your webpack.config.js :

{   test: /\.m?js$/,   exclude: /(node_modules|bower_components)/,   use: {     loader: 'babel-loader',     options: {       presets: ['@babel/preset-env']     }   } } 

more info