How to install and use Bootstrap, jQuery and popper.JS with webpack

The web development nowadays is not just HTML, CSS and JavaScript as it was in like 2 decades ago. You just can’t stop on these fundamentals to be a really good web developer. You need to learn further and further, exploring the new technologies in the field and try to upgrade yourself.

Recently I learned the Webpack and the question that I got in my mind that how can I use a Bootstrap with Webpack? Because Webpack is all about bundling the multiple asset and try to reduce the stress to include multiple files like .css or .js in your html.

Now, the question is how can one use the bootstrap in the project because you will also need to include jQuery and popperjs in your project as multiple bootstrap components are dependent on the jQuery and popperjs. So, I was curious and was trying multiple tricks to do so. After so many tries, I reached to the final point and realized that there could be multiple newbies who will get the same question in the future. So, I just made a simple guide which show how we are actually going to use the bootstrap with the webpack.

THIS GUIDE IS WRITTEN ON 7TH OF OCT 2021 AND THE VERSIONS OF THE LANGUAGES AND TOOLS USED ARE SHOWN BELOW.

Prerequisites

a really good code editor (hehe), Node JS, NPM latest version, internet connection for downloading packages and plugins

Basic setup and Installation

I am using a VS code for this tutorial. You can use any code editor as per your choice. Now, create a directory and initialize the NPM that will create composer.json file and install the webpack and webpack cli.

npm init -y
npm i -D webpack webpack-cli

(-D will save the packages as dev-dependencies.)

now, install the Bootstrap 4.6, popperjs and jQuery.

npm i npm i bootstrap@4.6.0 @popperjs/core jquery

Note that, popper.js package is officially deprecated and it is recommended to use the popperjs/core package instead.

Now, install the other dev dependencies that we need to process all the files and get the output.

npm i -D npm install auto-prefixer node-sass sass-loader style-loader css-loader postcss-loader export-loader postcss

The usage of each package and plugin is as follows —

postcss, postcss-loader = process the postcss with loader

node-sass, sass-loader = loader for sass/scss files

style-loader = inject css into DOM

css-loader = The css-loader interprets @import and url() like import/require() and will resolve them.

export-loader = if importing bootstrap plugins then export-loader is required

autoprefixer = this is a postcss pluging and will add the vendor prefixes to your CSScode.

Now create a following directory structure for easy understanding of source and output. The dist and node_modules folders will be automatically created, so no need to manually create them.

Recommended Directory Structure

Now, open the package.json file and in the script option, add the following command.

“build”: “webpack”,
“build:w”: “webpack -w”,

The ‘build’ command will the create a dist folder and put all your generated bundle there. The only catch here is we add the -w at the end so that whenever any changes happen in our source files, it will automatically recompile all the code without opening our cmd or console.

Webpack Configuration

Create a webpack.config.js file if you haven’t created yet. The bootstrap 4.6 uses sass and by assuming this, we have set up our webpack configuration. you can also include your own css/sass/scss files because we have used a really good regular expression for the test.

In src/app.js file, you have to import the bootstrap JavaScript.

import “bootstrap”;

Alternatively, you can also import the individual plugins as

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';

Now, import the bootstrap sass files in your src/scss/app.scss file.

You can also import other sass files in the app.scss.

@import “~bootstrap/scss/bootstrap”;

Alternatively, you can also import individual sass files.

// Required
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Optional
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";

Now, time to include this app.scss in your entry point app.js file so that all the css code will be bundled together.

Bundling with Webpack

Now, run the ‘npm run build’ to run the webpack and create a dist folder which contains all the output files.

Ignore the warning because the production mode is by default set for the webpack configuration and it will minify the output code. so you don’t have to really worry about it.

Now, to test this bundle, create a /dist/index.html file. and add the follwing code in it.

Note that, you can control the output bundle file name by specifying it in the webpack config file.

Now, you are ready to go with your bootstrap setup in your project.

Using the jQuery globally in project

But hold on, this is not enough. As a moved further in the project, I stuck on another problem that how could I actually use a jQuery methods in my project.

See, we have jQuery installed but we can’t use it directly in our project because the the jQuery function or $ sign is not defined explicitly in our project and that’s what we have to do now.

So, go to the /src/app.js file and add the following lines that will define the exact meaning of the $ sign or the jQuery function.

var $ = require(“jquery”);
window.jQuery = $;
window.$ = $;

now you can freely use the jQuery functions by using either ‘$’ or the ‘jQuery’.

So, at the end, your /src/app.js file should look like this.

So, that’s all from my side. I hope this guide is helpful for you. If you are stuck with something, you can comment down below or simply check out my GitHub repository where I have uploaded all the code with detailed readme file, so that you will be more clear about this stuff.

Bye Bye, see yaa all with another great and fun guide :)