1.7. Integrando Bootstrap con Webpack

En primer lugar, añade Bootstrap como dependencia de tu proyecto utilizando npm:

$ npm install bootstrap

1.7.1. Código JavaScript

Importa el código JavaScript de Bootstrap añadiendo la siguiente línea en el punto de entrada de la aplicación (normalmente es el archivo index.js o app.js):

import 'bootstrap';

Si solo quieres utilizar algunos plugins concretos, puedes importarlos individualmente:

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
// ...

Bootstrap depende de jQuery y Popper por lo que se han definido como peerDependencies. Esto significa que debes añadir ambas a tu archivo package.json ejecutando lo siguiente:

$ npm install --save jquery popper.js

1.7.2. Estilos CSS

En primer lugar, crear un archivo _custom.scss y redefine el valor de las variables Sass de Bootstrap como se explicó en las secciones anteriores. Después, importa este archivo desde la hoja de estilos de tu aplicación y a continuación, importa también los estilos de Bootstrap:

// primero se importa el archivo 'custom' porque puede redefinir el
// valor de algunas variables Bootstrap.
@import "custom";
@import "~bootstrap/scss/bootstrap";

Para que Bootstrap se compile correctamente, asegúrate de haber instalado los loaders sass-loader y postcss-loader con Autoprefixer. Como mínimo, tu archivo de configuración Webpack debería tener algo como lo siguiente:

{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader',
  }, {
    loader: 'css-loader',
  }, {
    loader: 'postcss-loader',
    options: {
      plugins: function () {
        return [
          require('precss'),
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader'
  }]
}

1.7.2.1. Importando los estilos compilados

Si lo prefieres, puedes importar directamente el código CSS compilado de Bootstrap añadiendo la siguiente línea en el punto de entrada de tu proyecto:

import 'bootstrap/dist/css/bootstrap.min.css';

La desventaja es que no puedes modificar fácilmente los estilos de Bootstrap ni redefinir ninguna de sus variables, así que solo se recomienda cuando quieres utilizar el estilo por defecto de Bootstrap.

La ventaja es que la configuración de Webpack se simplifica porque solamente necesitas los loaders style-loader y css-loader, que seguramente ya los tendrás instalados y configurados en tu proyecto:

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}