Bundling Bootstrap in Webpack

Time to bundle our final dependency into Webpack. Bootstrap consists of three parts. The first is Bootstrap's CSS file, followed by jQuery and Bootstrap's JavaScript file, which is dependent on jQuery. The last two files were ignored in this chapter's index.html file, since we weren't using them. But, since we are bundling our dependencies with Webpack, let's just bring all of them together. For the first step, install our dependencies (these are not dev dependencies; hence, -S is used instead of -D):

npm install -S jquery bootstrap@3

Bootstrap is written using Less instead of CSS. Less is a CSS pre-processor that extends CSS with more features, such as variables, mixins, and functions. To import Bootstrap's less file using Webpack, we need another loader:

npm install -D less less-loader

This will install the less compiler and loader into our node_modules. Now, in our rules, modify the CSS rules into:

{
  test: /\.(less|css)$/,
  use: [ 'style-loader', 'css-loader', 'less-loader' ]
},

This will add less-loader as the first option as a loader whenever CSS or a less file is detected by Webpack. Now, try npm run webpack. This time, you will get an error in the terminal saying "You may need an appropriate loader to handle this file type" for the fonts that are used by Bootstrap. Since Bootstrap is dependent on a lot of fonts, we need to create a separate loader to include them in our bundle. For this purpose, install the following:

npm install -D file-loader url-loader

And then include the following object in your rules array:

{
  test: /\.(svg|eot|ttf|woff|woff2)$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: 'fonts/[name].[ext]'
  }
},

This will tell Webpack if the file size is smaller than 10 KB. Then, simply inline the file into JavaScript as a data URL. Otherwise, move the file into the fonts folder and create a reference in JavaScript. This is useful to reduce a network overhead if the file is smaller than 10 KB. url-loader requires file-loader to be installed as a dependency. Once again, execute npm run webpack and, this time, your Bootstrap less file will be bundled successfully and you will be able to view your website in the browser.

As I mentioned earlier, we didn't use Bootstrap's JS files in our application. However, we might need to use them for our applications in the future. Bootstrap requires jQuery to be available in global scope so that it's JavaScript files can be executed. However, Webpack does not expose the JavaScript variables it has bundled unless it is explicitly specified to expose them.

To make jQuery available in the global scope throughout our web application, we need to use a Webpack plugin. Plugins are different from loaders. We'll see more about plugins in a moment. For now, add the following code after the module property of Webpack:

module: {
  rules: [...],
},
plugins: [
  new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery'
  }),
],

In our general.js file, include the following line to import all the Bootstrap JavaScript files into our web app:

import 'bootstrap';

npm install -D img-loader

{
  test: /\.(png|jpg|gif)$/,
  loaders: [
    {
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: 'images/[name].[ext]'
      }
    },
  'img-loader'
  ],
},