devwannabe devwannabe - 3 months ago 85
Node.js Question

Webpack not converting ES6 to ES5

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

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']
        }
      }
    ]
  }