How to Webpack 5 with Babel - Setup Tutorial

Babel enables one writing code with JavaScript features that aren't supported by most browser yet. Perhaps you have heard about JavaScript ES6 (ES2015), ES7, and other versions of ECMAScript specification which are up and coming for the JavaScript language. At the time of reading this, various versions may be already included in the JavaScript language.

By using Babel, the code which isn't supported yet, will get transpiled back to vanilla JavaScript so that every environment (e.g. browser) can interpret it. In order to get Babel running, you need to install two of its main dependencies on the command line:

npm install --save-dev @babel/core @babel/preset-env

Moreover, in case you have Webpack in place to bundle your JavaScript application, you will have to install a Webpack Loader for Babel:

npm install --save-dev babel-loader

Now, with all libraries (node packages) in place, you need to adjust your package.json and webpack.config.js (if necessary) to respect the Babel changes. These changes will include all packages you have installed before. First, in your package.json, include the Babel Preset:

{
  ...
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  ...
}

"[The] @babel/preset-env [preset] is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!" (Source)

Second, your webpack.config.js file needs to include Babel in its build process as well. There, make use of the previously installed Loader for Babel. You need to tell Webpack on which files to use the loader (e.g. .js files) and optionally which folders to exclude from the process (e.g. node_modules):

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js']
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
  },
  devServer: {
    static: path.resolve(__dirname, './dist'),
  },
};

You can start your application again. Nothing should have changed except for that you can use upcoming ECMAScript features for JavaScript now. An optional step would be to extract your Babel configuration into a separate .babelrc configuration file. You can create this file in your project's root directory on the command line:

touch .babelrc

Then, add the configuration for Babel -- which you have previously added in your package.json -- in the .babelrc file. Don't forget to remove the configuration in the package.json afterward. It should be configured only once.

{
  "presets": [
    "@babel/preset-env"
  ]
}

Babel enables you to use future JavaScript features in your browser, because it transpiles it down to vanilla JavaScript. Try it yourself by installing your first plugin. Make sure to see that the JavaScript feature doesn't work at first in your src/index.js file, but once you installed the plugin for the feature and integrated it in your .babelrc file, it should be possible to run the JavaScript source code.

Exercises:

• Confirm your source code for the last section
• Try out a Babel Plugin yourself
  • Install a Babel Plugin via npm to your project to support an upcoming JavaScript feature
  • Add the Plugin to your .babelrc file
  • Try the new JavaScript feature in your src/index.js file
• Try Imports
  • Create another JavaScript file in your src/ folder
  • Import the new JavaScript file in your src/index.js file
  • Add a logging statement to your new JavaScript file and check whether it shows up in the browser