Setup Bootstrap 4 (Beta 3) With Npm And Webpack

Install Node.js and webpack.

Install jquery, popper.js and bootstrap.

npm install jquery --savenpm install popper.js --save# npm install [email protected] --savenpm install [email protected] --save# require since beta.3npm 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 automaticallyimport '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 [email protected], jquery/dist/jquery.slim.js and popper.js/dist/umd/popper works fine. For [email protected] 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.


❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.