Install jquery, popper.js and bootstrap.
npm install jquery --savenpm install popper.js --save# https://getbootstrap.com/docs/4.0/getting-started/download/#npm# npm install [email protected] --savenpm install [email protected] --save# require since beta.3npm install exports-loader --save-devInclude 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.
References: