This is an update to a Webpack tutorial I wrote a while back.

Webpack 4 (nicknamed Legato 😄) is out and the community is still on the hots for it. I am too! 😎

For one, it is super fast. I had to blink a couple of times at the bundling speed. How did that happen! Lol. Anyway, this tutorial isn’t about Webpack 4 so I won’t dwell much on it — rather, it’s an update to a tutorial I wrote on Webpack (sometime last year). Let’s dive in.

First and foremost, you should install Webpack 4 and its new buddy — webpack-cli.

npm install webpack webpack-cli --save

Install the following dependencies required for the webpack configuration.

npm install css-loader sass-loader file-loader url-loader node-sass transfer-webpack-plugin extract-text-webpack-plugin@4.0.0-beta.0 image-webpack-loader jquery --save-dev

Note: If you are like me and you use extract-text-webpack-plugin , news flash: extract-text-webpack-plugin ≤3.0.2 has not been updated for Webpack 4 at the moment. However, there’s a patch available for now: extract-text-webpack-plugin@4.0.0-beta.0 . Another alternative is mini-css-extract-plugin .

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 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 = {};

• Automatically load modules for jQuery, 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.

• In your javascript entry file (depending on your project stack: React, Angular, Vue, 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

Note: This tutorial is for Webpack 4. If you still use Webpack 3, don’t worry, I’ve got you covered 👍. Check out this tutorial I wrote sometime last year. I hope this post was helpful 😄.

Cheers!