How to start a web app project using Bootstrap with NPM & Webpack

Sreejith Ezhakkad
Aug 31, 2018 · 3 min read

Initial Setup

Let’s first create a folder, initialize npm, install webpack locally, and install the webpack-cli.

$ mkdir bootstrap-npm-webpack && cd bootstrap-npm-webpack
$ npm init -y
$ npm install webpack --save-dev
$ npm install webpack-cli --save-dev

Create the following folder structure for your project, your source code in src folder and bundled distribution code dist.

Install Bootstrap

Install Bootstrap with its peer dependencies jQuery & Propper.JS

$ npm install bootstrap jquery popper.js --save

If you want to import Bootstrap’s JavaScript plugins individually as needed, you should also install exports-loader.

$ npm install exports-loader --save-dev

You should need to install the required loaders and postcss plugins for compiling and bundling Bootstrap precompiled Sass files.

$ npm install autoprefixer css-loader node-sass postcss-loader sass-loader style-loader --save-dev

Webpack Configuration file

Create a webpack configuration file webpack.config.js in your project root folder. Learn more about the webpack configuration from here.

webpack.config.js

const path = require('path');

module.exports = {
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(scss)$/,
use: [
{
// Adds CSS to the DOM by injecting a `<style>` tag
loader: 'style-loader'
},
{
// Interprets `@import` and `url()` like `import/require()` and will resolve them
loader: 'css-loader'
},
{
// Loader for webpack to process CSS with PostCSS
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')
];
}
}
},
{
// Loads a SASS/SCSS file and compiles it to CSS
loader: 'sass-loader'
}
]
}
]
}
};

Import Bootstrap’s JavaScript

Import Bootstrap’s JavaScript in to you app’s entry point, ie ‘app.js’ inside the ‘src’ folder. We have specified the entry point in webpack configuration file.

import 'bootstrap';

Import Bootstrap’s Scss

You can import the Bootstrap’s sass to another sass file. So you will need to create new sass file. For better folder structure I have put this on scss folder inside src directory.

Import all of Bootstrap’s Sass in app.scss

app.scss

@import "~bootstrap/scss/bootstrap";

Finally, include Bootstrap’s Sass in your bundle by adding this line to your app’s entry point app.js inside the srcfolder.

import './scss/app.scss';

Bundling the Webpack

To bundle you need to run webpack command from command line. This will create bundled file as you specified on webpack.config.js.

You can do the same creating a NPM command by adding a the following command to you package.json

Add the following line to your package.json file inside the scripts.

"build": "webpack"

You can now use the npm run build command to build your bundle with Webpack.

$ npm run build

Now you can use your bundled file. Include the bundled file in your html file (dist/index.html).

index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, world!</title>
</head>
<body>
<h1>My first Bootstrap - Webpack App!</h1>
<!-- Bundled File -->
<script src="./bundle.js"></script>
</body>
</html>

Run your html file. That is it!

Sreejith Ezhakkad

Written by

Web developer, Laravel geek, WordPress lover, CakePHP master, MERN Stack beginner, DevOps enthusiast, Minimalist, Problem solver, and Creative thinker

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade