Babel and Webpack keep evolving. It's time for yet another article about how to set them up for a web project in 2020.

You can check out a complete project here.

Set up the project

Create a new project and initialize git and npm.

$ mkdir myProject
$ cd myProject
$ git init
$ npm init

Create a public folder and stick in a skeleton index.html HTML file that will load a JS file that we expect to eventually produce using Webpack.

<!-- public/index.html -->

<!-- sourced from https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html -->
<!DOCTYPE html>
<html>

<body>
<div id="root"></div>
<noscript>
  You need to enable JavaScript to run this app.
</noscript>
<script src="../dist/bundle.js"></script>
</body>

</html>

(There's more you probably want with your <header> and such, we're ignoring that for now.)

Set up Babel

Install all the packages:

$ yarn add @babel/core @babel/cli @babel/preset-env

Create a babel.config.js file:

// babel.config.js

module.exports = {
  'presets': ['@babel/env']
}

Create a src/index.js file and put in some basic code.

// src/index.js

const add = (a = 1, b = 2) => {
  return a + b
}

You can run Babel from the command line to verify it's working.

$ ./node_modules/.bin/babel src/index.js

You should get something like this printed to your console (notice how it's transpiling ES2015 code -- the default parameters -- into compatible JS code for older browsers):

"use strict";

var add = function add() {
  var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
  var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
  return a + b;
};

Set up webpack

Install all the packages:

$ yarn add webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader

Add a webpack.config.js at the root:

// webpack.config.js

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader'
      },
      {
        test: /\.s?css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    publicPath: '/dist/',
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/",
  },
}

Add a build script to your package.json to run your webpack dev server:

{
  ...
  "scripts": {
    ...
    "start": "webpack-dev-server"
  },
}

Now run the script.

$ yarn start

And visit your site at http://localhost:3000. Viola, you have a working JS project.