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;
};

What do you expect it would do? You must compile your script with babel in the console or in a task runner (grunt, gulp, ...). https://babeljs.io/docs/usage/cli/ — Ludovic C, Dec 21 '15 at 21:25
Thanks a lot. I thought Webpack will do it for me via babel-loader. — devwannabe, Dec 21 '15 at 21:38
What I would like to happen is for Webpack to call babel and as much as possible to not use grunt or gulp — devwannabe, Dec 21 '15 at 21:39
I found this in 2 seconds on google all you need. Please search a little bit before asking! http://www.2ality.com/2015/04/webpack-es6.html — Ludovic C, Dec 21 '15 at 21:55
Thank you. I wasn't sure which terminologies to search for. That helped me a lot — devwannabe, Dec 21 '15 at 22:53
Ludo, when i did a search, this S.O. question is what came up. And I'm glad it did because i got exactly the answer I was looking for (thanks, @dreyescat) without my having to search through full page tutorials like the one you linked to (which, while sometimes great also sometimes don't have the specific answer I need). Everyone learns in different ways, and for me, Stack Overflow is often my preferred way to get a quick answer. So I'm glad OP asked the question. — Jeremy Moritz, Aug 23 '16 at 18:28

score 49 · Accepted Answer · edited Aug 23 '16 at 18:19

49

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

edited Aug 23 '16 at 18:19

Jeremy Moritz

13,864
7
39
43

answered Dec 21 '15 at 21:53

dreyescat

13,558
5
50
38

Thanks a lot! I will try it once I get home. I keep getting disconnected from the network. – devwannabe Dec 21 '15 at 22:55
1

It worked using this loader configuration module: { loaders: [ { loader: 'babel-loader', test: path.join(__dirname, 'app'), query: { presets: 'es2015', } } ] } – devwannabe Dec 21 '15 at 23:22
1

This seems to have no effect. Still emitting ES6 code. – Tyguy7 Mar 13 '18 at 20:32
This actually doesn't work. Preset 'es2015' does nothing at all, everything is installed properly. – Tyguy7 Mar 13 '18 at 20:45
ES6 stands for the version released in 2015(ES2015). ES5.1 stands for the version released in 2011. See: https://en.wikipedia.org/wiki/ECMAScript#Versions – Marian07 Dec 11 '18 at 14:42
Why the value `ES2015` targets even ES5: https://stackoverflow.com/questions/34747693/how-do-i-get-babel-6-to-compile-to-es5-javascript#comments-34747852 – Marian07 Dec 11 '18 at 14:52
ECMAScript 5 is also known as ES5 and ECMAScript 2009. ES2015 != ES5 – Alexey Sh. Oct 17 '19 at 08:45
2

Reminder: this likely wont work for your version today. Read this answer below: https://stackoverflow.com/a/59328252/5281187 – mewc Apr 02 '20 at 23:45
Question should be updated to reflect the latest versions/standards. Also an explanation of the differences between multiple methods shown would be helpful. – BBaysinger Jul 30 '21 at 04:25

score 20 · Answer 2 · answered Dec 13 '19 at 18:48

20

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

answered Dec 13 '19 at 18:48

Wildhammer

2,017
1
27
33

1

Confirmed this works for the modern installations of webpack. Check your projects version. – mewc Apr 02 '20 at 23:45
Yes it's has been deprecated. When I do npm install babel-preset-es2015 now, it note me that : deprecated babel-preset-es2015@6.24.1: ???? Thanks for using Babel: we recommend using babel-preset-env now: please read https://babeljs.io/env to update! And I got following code in .babelrc file now, it is works as expected: { "presets":["env", "react"] } – Rong.l Apr 15 '20 at 03:12

score 15 · Answer 3 · edited Jan 17 '18 at 12:03

15

for webpack 3, the module options should look like

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

this still requires babel-loader and babel-preset-es2015

edited Jan 17 '18 at 12:03

fingerpich

8,500
2
22
32

answered Jun 29 '17 at 16:05

PhilVarg

4,762
2
19
37

score 1 · Answer 4 · edited Jul 30 '21 at 04:21

1

I got the same problem. The official React answer is to add this configuration to Webpack.

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["react-hot-loader/babel"]
}

Here is the link: https://github.com/facebook/react/issues/8379

edited Jul 30 '21 at 04:21

BBaysinger

6,614
13
63
132

answered Nov 28 '18 at 14:44

Inessa Pokromkina

126
1
2
9

score 0 · Answer 5 · answered Jun 07 '21 at 07:08

you should also add target: "es5" in webpack.config.js

...

module.exports = {
  ...
  module: {
    target: "es5", // add this
    loaders: [
      { test: /\.js$/, loader: 'babel-loader' }
    ]
  }
};

see details at https://stackoverflow.com/a/65376531/10691147

Webpack not converting ES6 to ES5

5 Answers5

Linked