Babel isn't transpiling ES6 to ES5

Question

I'm desperately trying to get my Webpack config file to transpile ES6 into ES5, but for some reason it doesn't seem to work. I'm still getting the 'const' variable, arrow functions and spread operators in my exported js code. I've attached my webpack config file and my package.json file - any help would be really appreciated.

Package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build:dev": "cross-env NODE_ENV=development webpack --mode development",
    "build:prod": "cross-env NODE_ENV=production webpack --mode production",
    "start": "webpack-dev-server --port 9000 --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.7.7",
    "@babel/runtime": "^7.8.4",
    "autoprefixer": "^9.7.3",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "cross-env": "^6.0.3",
    "css-loader": "^3.4.0",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^6.0.0",
    "imagemin-webpack-plugin": "^2.4.2",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.0",
    "typescript": "^3.7.4",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1",
    "webpack-merge": "^4.2.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.8.3",
    "@glidejs/glide": "^3.4.1",
    "aos": "^3.0.0-beta.6",
    "axios": "^0.19.2",
    "core-js": "2",
    "jquery": "^3.4.1",
    "lodash": "^4.17.15",
    "query-string": "5.1.1",
    "scrollbooster": "^2.1.0",
    "simple-parallax-js": "^5.2.0",
    "smooth-scrollbar": "^8.5.1",
    "tippy.js": "^5.1.4"
  }
}

Webpack config:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const data = require('../pageinfo.json');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {

    entry: ['@babel/polyfill','./src/scripts/index.js'],

    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: '[name].[chunkhash].js'
    },

    module: {
        rules: [{
                test: [/.css$|.scss$/],
                use: [MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.(jpe?g|png|svg|gif)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'assets/images'
                    }
                }]
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [["@babel/preset-env", { "useBuiltIns": "usage" }]],
                        plugins: [
                            ["@babel/plugin-transform-runtime",
                                {
                                    "regenerator": true
                                }
                            ]
                        ]
                    }
                }
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'assets/fonts'
                    }
                }]
            }
        ]
    },

    resolve: {
        extensions: ['.js']
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: 'style.css'
        }),
        new CopyWebpackPlugin([{
            from: './src/assets/images',
            to: 'assets/images'
        }]),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'style.[chunkhash].css'
        })
    ]

};

Answer 1

Go to your package.json file. The babel command takes two arguments: the path to your ES6 code and a path to where you want your ES5 code to go.

If you have all your JavaScript code housed in a directory, then you can add the -d flag to the command to tell Babel for look for directories instead of files. For my example, I have my JavaScript code in my src directory but want my ES5 code to be put in a build directory.

// package.json
...
"scripts": {
  "build": "babel src -d build",
},
...

Then just run the Babel command

With your .babelrc file created and your build command ready, just run it in your command line.

 npm run build