Setup bootstrap with Webpack


If you need to use Bootstrap in your Webpack project, following steps needs to be taken.

first, install dependencies:

npm install webpack css-loader style-loader file-loader url-loader babel-core babel-loader babel-preset-es2015 --save-dev

then, necessary loaders needs to be added:

var path = require('path');
var webpack = require('webpack');

module.exports = {
entry: ‘./main.js’,
output: { path: __dirname, filename: ‘bundle.js’ },
module: {
loaders: [
{
test: /.jsx?$/,
loader: ‘babel-loader’,
exclude: /node_modules/,
query: {
presets: [‘es2015’, ‘react’]
}
},
{
test: /\.css$/,
loader: “style-loader!css-loader”
},
{
test: /\.png$/,
loader: “url-loader?limit=100000”
},
{
test: /\.jpg$/,
loader: “file-loader”
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: ‘url?limit=10000&mimetype=application/font-woff’
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: ‘url?limit=10000&mimetype=application/octet-stream’
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: ‘file’
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: ‘url?limit=10000&mimetype=image/svg+xml’
}]},};

Next, Bootstrap needs to be added to index.ts (or main.js):

import Bootstrap from 'bootstrap/dist/css/bootstrap.css';

now you can use bootsrap directly in yur application views and you are done!

Ramin Ahmadi
I am a full-stack front end developer with over 5 years experience in web design and development. I have worked with a wide variety of environments and languages including Angular, TypeScript, NodeJS, Restful API, Microservices, Atomic design, JQuery, Material design, Progressive Web Apps, DevOps, and many Azure tools. I make it a goal to automate myself out of routine tasks in my daily work. My motto is, ‘write human readable code, lean and clean’.

Comments 0

Your email address will not be published. Required fields are marked *

Setup bootstrap with Webpack

log in

Captcha!

reset password

Back to
log in
Font Resize
Choose A Format
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
List
The Classic Internet Listicles
Image
Photo or GIF
Gif
GIF format