Create a Multi-Page JavaScript Boilerplate with Webpack 5, Babel and ESLint (Part 2)

This article is a continuation of part 1.

In part 1, we set up Webpack. In part 2, we are going to set up HTML templates and CSS.

2. Setup HTML templates using Webpack Plugins

You might have noticed that there is only one file named index.bundle.js in /dist folder even though we did create an index.html. However, Webpack didn’t copy the index.html in the /dist folder.

This is where we need html-webpack-plugin

html-webpack-plugin — It is used to either generate html template or use our own template.

Webpack Plugins — These are JavaScript modules that enhance the functionality of Webpack. They are used to perform tasks such as defining HTML templates and optimizing and minifying codebase.

Install html-webpack-plugin plugin

npm install --save-dev html-webpack-plugin

Add html-webpack-plugin configurations in webpack.config.js

/*...*/
const HtmlWebpackPlugin = require('html-webpack-plugin');

{
  entry: {
       /**/
  },
  output: {
       /**/
  },
  plugins: [
    new HtmlWebpackPlugin({
    template: `./src/index.html`,
    filename: `index.html`,
    inject: true,
   }),
  ]
}

template — It defines the path to the template. the plugin will copy the template into /dist folder

filename — Name of template in /dist folder

inject — This flag is used to inject all assets into the given template. By default its value is true so we can skip the flag.

Run npm run dev command.
You will see index.html file is created inside /dist folder. File index.bundle.js is automatically injected inside the template. This is due to inject flag.
open dist/index.html file in a browser and you should see html page rendered.

3. Setup CSS using Webpack Loaders

We are ready to set up CSS. We will use loaders to set up SCSS in the project

Loaders allow us to preprocess files before they are added to the bundle. This allows to transform files such as JavaScript, CSS and images into modules and integrate into application

Install SCSS

Create file index.scss inside src/ folder

cd src
touch index.scss

body {
  background: #e7a462;
}

Run npm run dev and you will see that CSS styles are not applied.

To handle .scss files, we need to install a couple of libraries

npm install --save-dev style-loader css-loader sass-loader node-sass

style-loader — Inject CSS styles into the DOM

css-loader — Manage CSS dependencies in the project. It interprets @import and resolves them.

sass-loader — Compile SCSS and Sass files into css.

node-sass — This is a dependency and is used by sass-loader

Next, We need to add module object inside webpack configs. This is used to specify how modules should processed during the bundling process. It allows to define rules and loader for handling different file types.

{
  /*...*/
  module: {
    rules: [
    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
    }
   ]
  }
}

Open index.js file and import index.scss file

import './index.scss';

Run npm run dev to generate a new build. Open dist/index.html file in the browser and you should see the background CSS applied.

You will notice there is no separate file for CSS in dist/ folder. To add CSS in the dist folder, install packages mini-css-extract-plugin and css-minimizer-webpack-plugin.

npm install --save-dev mini-css-extract-plugin css-minimizer-webpack-plugin

mini-css-extract-plugin — Extract CSS in a separate file inside /dist older

css-minimizer-webpack-plugin — Optimize and minify css

Next, add configs for these plugins in webpack.config.js

{
  /*...*/
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

  {
   /*...*/
   plugins: [
    new HtmlWebpackPlugin({
      template: `./src/index.html`,
      filename: `index.html`,
      inject: true,
    }),
     new MiniCssExtractPlugin({
       filename: '[name].css',
     }),
   ],
   module: {
     rules: [
     {
       test: /\.scss$/,
       use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
     }
    ]
   },
   optimization: {
     minimize: true,
     minimizer: [new CssMinimizerPlugin()],
   },
  }
}

We made the following modifications in the webpack.config.js file

1. Import plugins
2. Initialize mini-css-extract-plugin in plugins array
3. Update rules key for scss. Replace style-loader with MiniCssExtractPlugin.loader
4. Add optimization key for setting up CSS minimization plugin

Run npm run dev and you should see a new minified index.css file in dist/ folder

We have successfully set up Scss.

Next, we are going to set up Babel.