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

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-devCreate 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 --saveIf you want to import Bootstrap’s JavaScript plugins individually as needed, you should also install exports-loader.
$ npm install exports-loader --save-devYou 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-devWebpack 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 buildNow 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!
