Setup Bootstrap 4 (Beta 3) With Npm And Webpack
January 8, 2018Install jquery
, popper.js
and bootstrap
.
npm install jquery --save
npm install popper.js --save
# https://getbootstrap.com/docs/4.0/getting-started/download/#npm
# npm install bootstrap@4.0.0-beta.2 --save
npm install bootstrap@4.0.0-beta.3 --save
# require since beta.3
npm install exports-loader --save-dev
Include all packages in your main application file.
// include through webpack.ProvidePlugin
// import 'jquery/dist/jquery.slim'
// import 'popper.js/dist/umd/popper'
// import 'bootstrap/dist/js/bootstrap'
import 'bootstrap'
// include through webpack.ProvidePlugin with exports-loader
// import 'bootstrap/js/dist/util'
// Since beta.3, jquery plugins are no longer imported automatically
import 'bootstrap/js/dist/modal'
import 'bootstrap/js/dist/tooltip'
import 'bootstrap/dist/css/bootstrap.css'
// import 'bootstrap/scss/bootstrap.scss'
Edit webpack config file to include the packages as global variables using ProvidePlugin
.
var webpack = require('webpack');
module.exports = {
...
plugins: [
new webpack.ProvidePlugin({
// the following will include default version instead of slim and umd
// '$': 'jquery',
// 'jQuery': 'jquery',
// 'Popper': 'popper.js'
// for bs4 beta1
// '$': 'jquery/dist/jquery.slim.js',
// 'jQuery': 'jquery/dist/jquery.slim.js',
// 'Popper': 'popper.js/dist/umd/popper'
// for bs4 beta3
'$': 'jquery',
jQuery: 'jquery',
// Popper: 'popper.js',
Popper: ['popper.js', 'default'],
'Util': "exports-loader?Util!bootstrap/js/dist/util"
}),
]
...
}
Note: For bootstrap@4.0.0-beta.1
, jquery/dist/jquery.slim.js
and popper.js/dist/umd/popper
works fine. For bootstrap@4.0.0-beta.3
when analyzing the bundle I found that both jquery.js
and jquery.slim.js
are included, both popper.js/dist/umd/popper
and popper.js/dist/esm/popper
are included, thus the following changes are made for beta.3
.
Note: If you don’t import Popper
as popper.js/dist/umd/popper
, you shall bump into Uncaught TypeError: Popper is not a constructor
. One of the solution is use Popper: ['popper.js', 'default']
which is equivelant to require('popper.js').default
. Another option is to use resolve.alias to auto convert popper.js
to popper.js/dist/umd/popper
.
Note: If you don’t include bootstrap/js/dist/util
with export-loader (beta.3), you will bump into Uncaught ReferenceError: Util is not defined
.
Note: To enforce that only jquery.slim.js
is used, you can use resolve.alias to auto convert import 'jquery'
to import 'jquery/dist/jquery.slim.js'
.
module.exports = {
...
resolve: {
extensions: ['.js'],
alias: {
'jquery': 'jquery/dist/jquery.slim.js',
}
},
...
}
To enable Sass support and generate a separate CSS files, refer to Webpack: Merge Multiple CSS Into Single File.
References:
- algo-trading
- algolia
- analytics
- android
- android-ktx
- android-permission
- android-studio
- apps-script
- bash
- binance
- bootstrap
- bootstrapvue
- chartjs
- chrome
- cloud-functions
- coding-interview
- contentresolver
- coroutines
- crashlytics
- crypto
- css
- dagger2
- datastore
- datetime
- docker
- eslint
- firebase
- firebase-auth
- firebase-hosting
- firestore
- firestore-security-rules
- flask
- fontawesome
- fresco
- git
- github
- glide
- godot
- google-app-engine
- google-cloud-storage
- google-colab
- google-drive
- google-maps
- google-places
- google-play
- google-sheets
- gradle
- html
- hugo
- inkscape
- java
- java-time
- javascript
- jetpack-compose
- jetson-nano
- kotlin
- kotlin-serialization
- layout
- lets-encrypt
- lifecycle
- linux
- logging
- lubuntu
- markdown
- mate
- material-design
- matplotlib
- md5
- mongodb
- moshi
- mplfinance
- mysql
- navigation
- nginx
- nodejs
- npm
- nuxtjs
- nvm
- pandas
- payment
- pip
- pwa
- pyenv
- python
- recylerview
- regex
- room
- rxjava
- scoped-storage
- selenium
- social-media
- ssh
- ssl
- static-site-generator
- static-website-hosting
- sublime-text
- ubuntu
- unit-test
- uwsgi
- viewmodel
- viewpager2
- virtualbox
- vue-chartjs
- vue-cli
- vue-router
- vuejs
- vuelidate
- vuepress
- web-development
- web-hosting
- webpack
- windows
- workmanager
- wsl
- yarn