This article is a continuation of Part 2.

In Part 2, we set up HTML templates and CSS.

Now, we'll configure Babel, the Assets folder and hot reload.

3. Configure Babel

We want to use the latest JavaScript features cross-browser. For this, we need to set up babel

babel — It takes Javascript code and converts it to vanilla JavaScript so that it can run on all browsers and we can use modern features across all browsers.

Install babel packages

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

Here’s how these libraries work together:

babel-loader — It is configured in Webpack configurations to process JavaScript files. When Webpack encounters a JavaScript file, babel-loader is responsible for passing it to babel for transpilation

babel/core — It is the core Babel library. It’s responsible for actual parsing, transformation and generation of the vanilla javascript

babel-env — This tool helps to write modern javascript code and make it runnable in all browsers. in babel-env configs, we can tell which version of JavaScript we want to write code and it figures out how to translate it to vanilla JavaScript.

Create a new file .babelrc for babel configurations

touch .babelrc

Add these configs in .babelrc file

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

Next, add babel configurations in webpack.config.js

{
/*...*/
module: {
 rules: [
   /*...*/
   {
      test: /\.(js)$/,
      exclude: /node_modules/,
      use: ['babel-loader'],
   },
  ],
 },
}

We are instructing Webpack to generate older javascript code for all .js files using babel-loader but exclude node_modules folder.

We setup Babel successfully. We can write the latest javascript in the app. You can add the latest code in the index.js file and it should work.

Setup Assets

Next, we need to set up assets. Let’s add an image inside assets/images folder. It will be used inside index.js file. For this, we need to enable handling images in the source code so that we can use import statements for images.

Add configs in webpack.config.js file

{
 /*...*/
 output: {
 /*...*/
   assetModuleFilename: 'images/[name][ext]',
 },
 module: {
 rules: [
 /*...*/
    {
      test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/i,
      type: 'asset/resource',
    },
  ]
 },
}

The Images folder is setup. Copy an image file under assets/images folder and use it in index.js file using import statement.

import bg from './assets/images/[IMAGE_NAME]';

Run build npm run dev. You should see image file inside assets/images folder is copied into dist/images folder.

Setup Hot Reload

We need to run npm run dev every time we need a change. We want webpack to rebuild the project whenever there is a change. For this, we are going to install webpack-dev-server

npm install --save-dev webpack-dev-server

In webpack.config.js, add configs for webpack-dev-server

{
 /*...*/
output: {
    /*...*/
},
 devServer: {
   watchFiles: ['src/*.html'],
   static: path.resolve(__dirname, './dist'),
   hot: true,
   open: true,
 },
 watchOptions: {
   poll: 1000,
   ignored: '/node_modules/',
 },
}

Update package.json file, and modify dev key

{
  "dev": "webpack serve --mode=development & webpack --mode development"
}

Run npm run dev, a page should open in the browser. From this point onwards whenever you make a change in index.css, index.js or index.html file, it will be reflected in the browser.

Next, we will set up multi-page HTML templates.