Saltar al contenido principal Saltar a la navegación de documentos
Check
in English

Bootstrap y paquete web

La guía oficial sobre cómo incluir y agrupar CSS y JavaScript de Bootstrap en su proyecto usando Webpack.

En esta página
¿Quieres saltar hasta el final? Descargue el código fuente y la demostración funcional de esta guía desde el repositorio twbs/examples . También puede abrir el ejemplo en StackBlitz para editarlo en vivo.

Configuración

Estamos creando un proyecto de paquete web con Bootstrap desde cero, por lo que hay algunos requisitos previos y pasos previos antes de que podamos comenzar realmente. Esta guía requiere que tenga instalado Node.js y cierta familiaridad con la terminal.

  1. Cree una carpeta de proyecto y configure npm. Crearemos la my-projectcarpeta e inicializaremos npm con el -yargumento para evitar que nos haga todas las preguntas interactivas.

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

  2. Instalar paquete web. A continuación, debemos instalar nuestras dependencias de desarrollo de Webpack: webpackpara el núcleo de Webpack, webpack-clipara que podamos ejecutar los comandos de Webpack desde la terminal y webpack-dev-serverpara que podamos ejecutar un servidor de desarrollo local. Solemos --save-devseñalar que estas dependencias son solo para uso de desarrollo y no para producción.

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

  3. Instalar Bootstrap. Ahora podemos instalar Bootstrap. También instalaremos Popper, ya que nuestros menús desplegables, popovers e información sobre herramientas dependen de ello para su posicionamiento. Si no planea usar esos componentes, puede omitir Popper aquí.

    npm i --save bootstrap @popperjs/core

  4. Instalar dependencias adicionales. Además de Webpack y Bootstrap, necesitamos algunas dependencias más para importar y agrupar correctamente CSS y JS de Bootstrap con Webpack. Estos incluyen Sass, algunos cargadores 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 empezar a trabajar creando los archivos del proyecto e importando Bootstrap.

Estructura del proyecto

Ya creamos la my-projectcarpeta e inicializamos npm. Ahora también crearemos nuestras carpetas srcy para completar la estructura del proyecto. distEjecute lo siguiente desde my-projecto cree 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 haya terminado, su 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 el lugar correcto, pero Webpack no funcionará porque aún no hemos completado nuestro webpack.config.js.

Configurar paquete web

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

  1. Abre webpack.config.jsen tu editor. Como está en blanco, necesitaremos agregarle una configuración repetitiva para que podamos iniciar nuestro servidor. Esta parte de la configuración le dice a Webpack que debe buscar el JavaScript de nuestro proyecto, dónde generar el código compilado ( dist) y cómo debe comportarse el servidor de desarrollo (extrayendo de la distcarpeta con recarga en caliente).

    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 el JS incluidos que agregaremos en pasos posteriores. Antes de que podamos hacer eso, tenemos que darle algo para renderizar e incluir el outputJS 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 <button>para que podamos ver cuándo Webpack carga el CSS de Bootstrap.

  3. Ahora necesitamos un script npm para ejecutar Webpack. Abra package.jsony agregue el startscript que se muestra a continuación (ya debería tener el script de prueba). Usaremos este script para iniciar nuestro servidor de desarrollo Webpack local.

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

  4. Y finalmente, podemos iniciar Webpack. Desde la my-projectcarpeta en su terminal, ejecute ese script npm recién agregado:

    npm start
    Servidor de desarrollo Webpack ejecutándose

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

Importar Bootstrap

La importación de Bootstrap a Webpack requiere los cargadores que instalamos en la primera sección. Los instalamos con npm, pero ahora se debe configurar Webpack para usarlos.

  1. Configure los cargadores en webpack.config.js. Su archivo de configuración ahora está completo y debe coincidir con el fragmento a continuación. La única parte nueva aquí es la modulesección.

    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 cargadores. style-loaderinyecta el CSS en un <style>elemento <head>de la página HTML, css-loaderayuda con el uso de @importy url(), postcss-loaderes necesario para Autoprefixer y sass-loadernos permite usar Sass.

  2. Ahora, importemos el CSS de Bootstrap. Agregue lo siguiente para src/scss/styles.scssimportar todo el Sass de origen de Bootstrap.

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

    También puede importar nuestras hojas de estilo individualmente si lo desea. Lea nuestros documentos de importación de Sass para obtener más detalles.

  3. A continuación cargamos el CSS e importamos el JavaScript de Bootstrap. Agregue lo siguiente para src/js/main.jscargar 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 puede importar complementos de JavaScript individualmente según sea necesario para mantener bajos los tamaños de los paquetes:

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

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

    Lea nuestros documentos de JavaScript para obtener más información sobre cómo usar los complementos de Bootstrap.

  4. ¡Y tu estas listo! 🎉 Con la fuente Sass y JS de Bootstrap completamente cargada, su servidor de desarrollo local ahora debería verse así.

    Servidor de desarrollo Webpack ejecutándose con Bootstrap

    Ahora puede comenzar a agregar cualquier componente de Bootstrap que desee usar. Asegúrese de consultar el proyecto de ejemplo completo de Webpack para saber cómo incluir Sass personalizado adicional y optimizar su compilación importando solo las partes de CSS y JS de Bootstrap que necesita.

Optimizaciones de producción

Dependiendo de su configuración, es posible que desee implementar algunas optimizaciones adicionales de seguridad y velocidad útiles para ejecutar el proyecto en producción. Tenga en cuenta que estas optimizaciones no se aplican en el proyecto de ejemplo de Webpack y depende de usted implementarlas.

Extrayendo CSS

Lo style-loaderque configuramos arriba emite convenientemente CSS en el paquete para que dist/index.htmlno sea necesario cargar manualmente un archivo CSS. Sin embargo, es posible que este enfoque no funcione con una política de seguridad de contenido estricta y se convierta en un cuello de botella en su aplicación debido al gran tamaño del paquete.

Para separar el CSS para que podamos cargarlo directamente desde dist/index.html, use el mini-css-extract-loadercomplemento Webpack.

Primero, instala el complemento:

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

Luego cree una instancia y use el complemento en la configuración del paquete web:

--- 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 ejecutarlo npm run buildnuevamente, habrá un nuevo archivo dist/main.cssque contendrá todo el CSS importado por src/js/main.js. Si ve dist/index.htmlen su navegador ahora, faltará el estilo, ya que ahora está en formato dist/main.css. Puede incluir el CSS generado de dist/index.htmlesta manera:

--- 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 a través de data:URI en línea. Si define una política de seguridad de contenido para su proyecto que bloquea los data:URI para las imágenes, estos archivos SVG no se cargarán. Puede solucionar este problema extrayendo los archivos SVG en línea utilizando la función de módulos de activos de Webpack.

Configure Webpack para extraer archivos SVG en línea como este:

--- 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 npm run buildvolver a ejecutarlo, encontrará los archivos SVG extraídos dist/iconsy correctamente referenciados desde CSS.

¿Ve algo incorrecto o desactualizado aquí? Abre una incidencia en GitHub . ¿Necesita ayuda para solucionar problemas? Busque o inicie una discusión en GitHub.