This is a guide to easily set up and install babel and babel-loader with webpack

If you need to start by installing webpack and getting the basics (before setting up babel) installed then checkout my guide to setting up Webpack - then come back here to continue and install babel.

Installing the babel packages

Run the following command to install babel (you can also use npm install)

yarn add -D @babel/core @babel/preset-env babel-loader

Update webpack.config.js

If you do not have a webpack.config.js, create one and update it with the following:

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {

    // babel configuration is below:
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader', // <<<
          options: {
            presets: ['@babel/preset-env'] // <<<
          }
        }
      }
    ]
  },
};