Prerequisites
- Basic Knowledge of HTML, CSS, and JavaScript
- Node.js and npm installed on your system
Installation
Create a project folder
mkdir my-project && cd my-project
Create a package.json
npm init -y
Install webpack and additional dependencies
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin css-loader style-loader
Install Bootstrap
npm install bootstrap
Project structure
Create project folders
mkdir {src,src/js,src/css}
Create project files
touch src/index.html src/js/index.js src/css/styles.css webpack.config.js
Configure webpack and update project files
Update webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
clean: true,
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
],
devServer: {
static: "./dist",
port: 8080,
open: true,
hot: true,
},
mode: "development",
};
Update the HTML file
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack Bootstrap Project</title>
</head>
<body>
<div class="container">
<h1 class="text-center mt-5">Hello, Webpack with Bootstrap!</h1>
</div>
</body>
</html>
Update the JavaScript file
src/js/index.js
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle";
import "../css/styles.css";
console.log("Webpack with Bootstrap is running");
Update package.json scripts
src/package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"start": "webpack serve --mode development"
},
Run the development server
npm start
Build the project
npm run build
Conclusion
Your project is now set up with npm, Webpack, and Bootstrap, and you can build and run the dev server.