Setting Up Webpack for Bootstrap 4 and Font Awesome

‘Setting up Webpack for Bootstrap 4 and FontAwesome is quite easy when you know how’ — Esther Falayi, 2017

Recently, I stumbled on Bootstrap 4, read through the beautifully-put-together documentation (which was quite detailed) and I got thinking of a way to use Bootstrap’s npm package. You see, I’ve always used the CDN link and life has been easy. But hey, it doesn’t hurt to try something different. While I was still nibbling on the ‘bootstrap-npm-setup’ thought, I added another thought: “Why don’t I use the Font Awesome npm package?”. Then I got busy.

I took up a recent project I’d designed with Material UI and started to break down structures. Lol. It’s still funny how easy it is to destroy things. Mind you, I did not destroy my project — I worked on a small section. So there I was, looking confused — I had done everything. I mean, I had installed everything and I was still getting errors from webpack! Errrghh.

Eventually, I fixed the errors and I decided to write this tutorial to help you avoid some errors I encountered.

First and foremost, ensure that the following packages have been installed in your project folder. If not, you have to install them as they will be required in our webpack configuration.

npm install css-loader sass-loader file-loader url-loader node-sass extract-text-webpack-plugin transfer-webpack-plugin image-webpack-loader jquery --save-dev

Configure Webpack for Bootstrap 4

• Create a webpack.config.js file and configure webpack as you would normally do. Here’s a sample below.

• Install the following Bootstrap 4 dependencies for Webpack.

npm install bootstrap@4.0.0-beta tether popper.js autoprefixer precss exports-loader imports-loader postcss-loader --save

• Create a postcss.config.js file and write the code below. This file is required by postcss-loader.

module.exports = {};

This line would save me from a postcss-loader error later on.

• In your webpack.config.js file, include tether as an entry point (This is not compulsory but it ensures that tether is loaded immediately).

• Automatically load modules for jQuery, tether, popper, and Bootstrap javascript components. This will be done with ProvidePlugin of webpack. You might not need some Bootstrap components, though. You can check out Bootstrap-loader on how to turn off some of these components.

NOTE: You have to import bootstrap in your main entry file

• In your javascript entry file (depending on your project stack: react, angular, etc), ensure you import/require bootstrap.

import 'bootstrap';
OR
require('bootstrap');

• Require precss and autoprefixer in your config file.

const autoprefixer = require('autoprefixer');
const precss = require('precss');

• Add rules for css and scss files.

• Add another rule for bootstrap files.

Configure Webpack for FontAwesome

• Install font-awesome-loader and font-awesome.

npm install font-awesome-loader --save-dev
npm install font-awesome --save

• Create a font-awesome.config.js file and write the following code.

• Add Font Awesome scss file in your entry point.

• In your webpack.config.js file, add the following rule for Font Awesome

Here’s the full webpack configuration file

You can find all codes used in this tutorial in a repo I created on GitHub. At the moment of writing, I used Webpack 3. Good news though, I’ve updated this tutorial for Webpack 4 and it’s been published! 🎉 🎉 🎉. Do check it out 😉.

I hope this tutorial helps you in setting up Webpack (with Bootstrap 4 and Font Awesome) for your next project. Cheers!