Saltar al contenido principal Saltar a la navegación de la documentación
Check
¡Hay una versión más nueva de Bootstrap!
Ver en GitHub

Bootstrap & Webpack

La guía oficial para incluir y empaquetar el CSS y JavaScript de Bootstrap en tu proyecto usando Webpack.

On this page
¿Quieres saltar al final? Descarga el código fuente y la demo funcional de esta guía desde el repositorio twbs/examples. También puedes abrir el ejemplo en StackBlitz para edición en vivo.

Configuración

Estamos construyendo un proyecto de Webpack con Bootstrap desde cero, así que hay algunos prerrequisitos y pasos preliminares antes de poder empezar realmente. Esta guía requiere que tengas Node.js instalado y cierta familiaridad con la terminal.

  1. Crea una carpeta de proyecto y configura npm. Crearemos la carpeta my-project e inicializaremos npm con el argumento -y para evitar que nos haga todas las preguntas interactivas.

    mkdir my-project && cd my-project
npm init -y

  2. Instala Webpack. A continuación necesitamos instalar nuestras dependencias de desarrollo de Webpack: webpack para el núcleo de Webpack, webpack-cli para poder ejecutar comandos de Webpack desde la terminal, y webpack-dev-server para poder ejecutar un servidor de desarrollo local. Usamos --save-dev para indicar que estas dependencias son solo para uso en desarrollo y no para producción.

    npm i --save-dev webpack webpack-cli webpack-dev-server

  3. Instala Bootstrap. Ahora podemos instalar Bootstrap. También instalaremos Popper ya que nuestros menús desplegables, popovers y tooltips dependen de él para su posicionamiento. Si no planeas usar esos componentes, puedes omitir Popper aquí.

    npm i --save bootstrap @popperjs/core

  4. Instala dependencias adicionales. Además de Webpack y Bootstrap, necesitamos algunas dependencias más para importar y empaquetar correctamente el CSS y JS de Bootstrap con Webpack. Estas incluyen Sass, algunos loaders y Autoprefixer.

    npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader

Ahora que tenemos todas las dependencias necesarias instaladas, podemos ponernos a trabajar creando los archivos del proyecto e importando Bootstrap.

Estructura del proyecto

Ya hemos creado la carpeta my-project e inicializado npm. Ahora también crearemos nuestras carpetas src y dist para completar la estructura del proyecto. Ejecuta lo siguiente desde my-project, o crea manualmente la estructura de carpetas y archivos que se muestra a continuación.

mkdir {dist,src,src/js,src/scss}
touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js

Cuando termines, tu proyecto completo debería verse así:

my-project/
├── dist/
│   └── index.html
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│       └── styles.scss
├── package-lock.json
├── package.json
└── webpack.config.js

En este punto, todo está en su lugar, pero Webpack no funcionará porque aún no hemos completado nuestro webpack.config.js.

Configurar Webpack

Con las dependencias instaladas y nuestra carpeta de proyecto lista para empezar a programar, ahora podemos configurar Webpack y ejecutar nuestro proyecto localmente.

  1. Abre webpack.config.js en tu editor. Como está en blanco, necesitamos añadirle algo de configuración base para poder iniciar nuestro servidor. Esta parte de la configuración le dice a Webpack dónde buscar el JavaScript de nuestro proyecto, dónde outputar el código compilado (dist), y cómo debe comportarse el servidor de desarrollo (obteniendo desde la carpeta dist con hot reload).

    const path = require('path')

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  }
}

  2. A continuación completamos nuestro dist/index.html. Esta es la página HTML que Webpack cargará en el navegador para utilizar el CSS y JS empaquetados que añadiremos en pasos posteriores. Antes de poder hacer eso, tenemos que darle algo que renderizar e incluir el output JS del paso anterior.

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Webpack</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Webpack!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script src="./main.js"></script>
  </body>
</html>

    Estamos incluyendo un poco de estilo de Bootstrap aquí con el div class="container" y el <button> para que veamos cuando el CSS de Bootstrap es cargado por Parcel.

  3. Ahora necesitamos un script de npm para ejecutar Webpack. Abre package.json y añade el script start que se muestra a continuación (ya deberías tener el script test). Usaremos este script para iniciar nuestro servidor de desarrollo local de Webpack. 

    {
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}

  4. Y finalmente, podemos iniciar Webpack. Desde la carpeta my-project en tu terminal, ejecuta ese script de npm recién añadido:

    npm start
    Servidor de desarrollo de Webpack ejecutándose

En la siguiente y última sección de esta guía, configuraremos los loaders de Webpack e importaremos todo el CSS y JavaScript de Bootstrap.

Importar Bootstrap

Importar Bootstrap en Webpack requiere los loaders que instalamos en la primera sección. Los hemos instalado con npm, pero ahora Webpack necesita ser configurado para usarlos.

  1. Configura los loaders en webpack.config.js. Tu archivo de configuración ahora está completo y debería coincidir con el fragmento a continuación. La única parte nueva aquí es la sección module.

    const path = require('path')

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [
                  require('autoprefixer')
                ]
              }
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
}

    Aquí hay un resumen de por qué necesitamos todos estos loaders. style-loader inyecta el CSS en un elemento <style> en el <head> de la página HTML, css-loader ayuda con el uso de @import y url(), postcss-loader es necesario para Autoprefixer, y sass-loader nos permite usar Sass.

  2. Ahora, importemos el CSS de Bootstrap. Añade lo siguiente a src/scss/styles.scss para importar todo el Sass fuente de Bootstrap.

    // Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";

    También puedes import our stylesheets individually if you want. Lee nuestra documentación de importación de Sass para más detalles.

  3. A continuación cargamos el CSS e importamos el JavaScript de Bootstrap. Añade lo siguiente a src/js/main.js para cargar el CSS e importar todo el JS de Bootstrap. Popper se importará automáticamente a través de Bootstrap.

    // Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

    También puedes importar los plugins de JavaScript individualmente según sea necesario para mantener los tamaños del bundle pequeños:

    import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'

    Lee nuestra documentación de JavaScript para más información sobre cómo usar los plugins de Bootstrap.

  4. ¡Y ya está! 🎉 Con el Sass y JS fuente de Bootstrap completamente cargados, tu servidor de desarrollo local debería verse así ahora.

    Servidor de desarrollo de Webpack ejecutándose with Bootstrap

    Ahora puedes empezar a añadir cualquier componente de Bootstrap que quieras usar. Asegúrate de revisar el proyecto de ejemplo completo de Webpack para ver cómo incluir Sass personalizado adicional y optimizar tu compilación importando solo las partes del CSS y JS de Bootstrap que necesitas.

Optimizaciones de producción

Dependiendo de tu configuración, puede que quieras implementar algunas optimizaciones adicionales de seguridad y velocidad útiles para ejecutar el proyecto en producción. Ten en cuenta que estas optimizaciones no se aplican en el proyecto de ejemplo de Webpack y dependen de ti implementarlas.

Extracción de CSS

El style-loader que configuramos arriba convenientemente emite el CSS al bundle para que cargar manualmente un archivo CSS en dist/index.html no sea necesario. Este enfoque puede no funcionar con una Content Security Policy estricta, sin embargo, y puede convertirse en un cuello de botella en tu aplicación debido al gran tamaño del bundle.

Para separar el CSS de modo que podamos cargarlo directamente desde dist/index.html, usa el plugin de Webpack mini-css-extract-loader.

Primero, instala el plugin:

npm install --save-dev mini-css-extract-plugin

Luego instancia y usa el plugin en la configuración de Webpack:

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -1,8 +1,10 @@
+const miniCssExtractPlugin = require('mini-css-extract-plugin')
 const path = require('path')

 module.exports = {
   mode: 'development',
   entry: './src/js/main.js',
+  plugins: [new miniCssExtractPlugin()],
   output: {
     filename: "main.js",
     path: path.resolve(__dirname, "dist"),
@@ -18,8 +20,8 @@ module.exports = {
         test: /\.(scss)$/,
         use: [
           {
-            // Adds CSS to the DOM by injecting a `<style>` tag
-            loader: 'style-loader'
+            // Extracts CSS for each JS file that includes CSS
+            loader: miniCssExtractPlugin.loader
           },
           {

Después de ejecutar npm run build nuevamente, habrá un nuevo archivo dist/main.css, que contendrá todo el CSS importado por src/js/main.js. Si ves dist/index.html en tu navegador ahora, faltará el estilo, ya que ahora está en dist/main.css. Puedes incluir el CSS generado en dist/index.html así:

--- a/webpack/dist/index.html
+++ b/webpack/dist/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="./main.css">
     <title>Bootstrap w/ Webpack</title>
   </head>
   <body>

Extracción de archivos SVG

El CSS de Bootstrap incluye múltiples referencias a archivos SVG vía URIs inline data:. Si defines una Content Security Policy para tu proyecto que bloquea las URIs data: para imágenes, entonces estos archivos SVG no se cargarán. Puedes solucionar este problema extrayendo los archivos SVG inline usando la función de asset modules de Webpack.

Configurar Webpack to extract inline SVG files like this:

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -16,6 +16,14 @@ module.exports = {
   },
   module: {
     rules: [
+      {
+        mimetype: 'image/svg+xml',
+        scheme: 'data',
+        type: 'asset/resource',
+        generator: {
+          filename: 'icons/[hash].svg'
+        }
+      },
       {
         test: /\.(scss)$/,
         use: [

Después de ejecutar npm run build nuevamente, encontrarás los archivos SVG extraídos en dist/icons y correctamente referenciados desde el CSS.

¿Ves algo mal o desactualizado aquí? Por favor abre un issue en GitHub. ¿Necesitas ayuda para solucionar problemas? Busca o inicia una discusión en GitHub.

Traducción mantenida por Esdocu. Visita esdocu.com para ver más documentaciones traducidas.