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, ...). babeljs.io/docs/usage/cli — Ludovic C
– Ludovic C, Commented Dec 21, 2015 at 21:25
Thanks a lot. I thought Webpack will do it for me via babel-loader. — devwannabe
– devwannabe, Commented Dec 21, 2015 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
– devwannabe, Commented Dec 21, 2015 at 21:39
I found this in 2 seconds on google all you need. Please search a little bit before asking! 2ality.com/2015/04/webpack-es6.html — Ludovic C
– Ludovic C, Commented Dec 21, 2015 at 21:55
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
– Jeremy Moritz, Commented Aug 23, 2016 at 18:28

Jeremy Moritz · Accepted Answer · 2016-08-23 18:19:13Z

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, 2016 at 18:19

Jeremy Moritz

15.1k7 gold badges44 silver badges47 bronze badges

answered Dec 21, 2015 at 21:53

dreyescat

13.9k5 gold badges52 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

devwannabe Over a year ago

Thanks a lot! I will try it once I get home. I keep getting disconnected from the network.

devwannabe Over a year ago

It worked using this loader configuration module: { loaders: [ { loader: 'babel-loader', test: path.join(__dirname, 'app'), query: { presets: 'es2015', } } ] }

Tyguy7 Over a year ago

This seems to have no effect. Still emitting ES6 code.

Tyguy7 Over a year ago

This actually doesn't work. Preset 'es2015' does nothing at all, everything is installed properly.

mewc Over a year ago

Reminder: this likely wont work for your version today. Read this answer below: stackoverflow.com/a/59328252/5281187

|

Wildhammer · Accepted Answer · 2019-12-13 18:48:19Z

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, 2019 at 18:48

Wildhammer

2,2451 gold badge30 silver badges37 bronze badges

2 Comments

mewc Over a year ago

Confirmed this works for the modern installations of webpack. Check your projects version.

Rong.l Over a year ago

Yes it's has been deprecated. When I do npm install babel-preset-es2015 now, it note me that : deprecated [email protected]: ???? Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update! And I got following code in .babelrc file now, it is works as expected: { "presets":["env", "react"] }

fingerpich · Accepted Answer · 2018-01-17 12:03:09Z

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, 2018 at 12:03

fingerpich

9,4002 gold badges24 silver badges34 bronze badges

answered Jun 29, 2017 at 16:05

PhilVarg

4,8303 gold badges22 silver badges39 bronze badges

Comments

BBaysinger · Accepted Answer · 2021-07-30 04:21:41Z

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, 2021 at 4:21

BBaysinger

6,92714 gold badges78 silver badges149 bronze badges

answered Nov 28, 2018 at 14:44

Inessa Pokromkina

1261 gold badge2 silver badges9 bronze badges

Comments

Jeong Ho Nam · Accepted Answer · 2021-06-07 07:08:38Z

0

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

answered Jun 7, 2021 at 7:08

Jeong Ho Nam

87913 silver badges22 bronze badges

Collectives™ on Stack Overflow

Webpack not converting ES6 to ES5

5 Answers 5

9 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

9 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related