How to Bundle Bootstrap 5 With Webpack

Dimas Maulana Development

09-01-2022

Contents

In this tutorial, we will walk you through the process of bundling Bootstrap 5 with Webpack, a popular JavaScript module bundler. By bundling Bootstrap with Webpack, you can efficiently manage and optimize your project’s JavaScript and CSS assets.

Before we begin, make sure you have Node.js and npm (Node Package Manager) installed on your system. You will also need a basic understanding of using npm and Webpack in your project.

Step 1: Create a New Project

If you haven’t already, create a new project directory and navigate to it in your terminal. You can do this with the following commands:

1
2


mkdir my-bootstrap-webpack-project
cd my-bootstrap-webpack-project

Step 2: Initialize npm

To manage project dependencies, we’ll use npm. Initialize your project by running:

1

npm init -y

This command will create a package.json file with default settings.

Step 3: Install Bootstrap

Next, you’ll need to install Bootstrap as a project dependency. We’ll also install bootstrap-icons for additional icons. Run the following commands:

1

npm install bootstrap bootstrap-icons

Step 4: Create Your Webpack Configuration

Create a webpack.config.js file in your project root directory if you haven’t already. This file will define your Webpack configuration. Here’s a basic example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


const path = require('path');

module.exports = {
  entry: './src/js/main.js', // Your main JavaScript file
  output: {
    filename: 'bundle.js', // The output bundle file name
    path: path.resolve(__dirname, 'dist', 'assets', 'js'), // Output directory
  },
  module: {
    rules: [
      // Add rules for JavaScript files here, if needed
    ],
  },
};

This is a minimal Webpack configuration. You can add more loaders and plugins based on your project’s requirements, such as Babel for transpilation.

Step 5: Import Bootstrap in Your JavaScript

In your main.js or the entry point of your JavaScript application, import Bootstrap and any Bootstrap components you need. For example:

1
2
3


import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap CSS
import 'bootstrap'; // Import Bootstrap JavaScript
import 'bootstrap-icons/font/bootstrap-icons.css'; // Import Bootstrap Icons CSS

Make sure to adjust the paths according to the location of your node_modules folder.

Step 6: Build Your Project

Now, you can build your project using Webpack. Run the following command:

1

npx webpack

This command will bundle your JavaScript and assets according to the configuration in your webpack.config.js.

Step 7: Include the Bundle in Your HTML

In your HTML file (e.g., index.html), include the generated bundle file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!DOCTYPE html>
<html>
<head>
    <!-- Your other head elements -->
</head>
<body>
    <!-- Your HTML content -->
    <script src="dist/assets/js/bundle.js"></script>
</body>
</html>

Make sure to adjust the src attribute to match the path to your generated bundle file.

Step 8: Run Your Application

You’re all set! You can now run your application using your preferred development server or by opening the HTML file in your browser.

That’s it! You’ve successfully bundled Bootstrap 5 with Webpack in your project. You can expand on this foundation by adding more webpack loaders and plugins as needed for your project’s specific requirements.