1. Tutorials
  2. Bootstrap

Setup Bootstrap 4 (Beta 3) With Npm And Webpack

January 8, 2018

Install Node.js and webpack.

Install 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:

❤️ Is this article helpful?
Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.
👶 Apps I built
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now
By Desmond Lua
A dream boy who enjoys programming and travelling, maker of Travelopy. Follow me on @d_luaz.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.