Ejupi contenido principal-pe Eike docs jeguatahápe
Check
in English

Ñepyrũrã & Webpack rehegua

Pe ñe’ẽmondo oficial mba’éichapa ikatu emoinge ha embojoaju Bootstrap CSS ha JavaScript nde proyecto-pe Webpack rupive.

Ko páhinape
¿Resaltasépa ipahaite peve? Emboguejy código fuente ha demostración omba’apóva ko guía-pe g̃uarã twbs/examples ñeñongatuhágui . Ikatu avei eipe’a techapyrã StackBlitz -pe edición en vivo-pe g̃uarã.

Mbohete

Romopu’ã hína peteĩ proyecto Webpack Bootstrap ndive zero guive, upévare oĩ peteĩ requisito previo ha umi paso tenondegua ikatu mboyve añetehápe roñepyrũ. Ko ñemboheko ojerure oguereko hag̃ua Node.js oñemboguapýva ha michĩmi familiaridad terminal rehegua.

  1. Ejapo peteĩ proyecto ryru ha emohenda npm. Jajapóta pe my-projectcarpeta ha ñamoñepyrũta npm -yargumento reheve ani hag̃ua ojapo ñandéve opaite porandu interactivo.

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

  2. Emoĩ Webpack. Upe rire tekotevẽ ñamoĩ ñande Webpack ñemoheñói dependenciakuéra: webpackWebpack apytuꞌurã, webpack-cliikatu hag̃uáicha ñamombaꞌapo Webpack tembiapoukapy terminal guive, ha webpack-dev-serverikatu hag̃uáicha ñamombaꞌapo peteĩ servidor desarrollo local. Jaipuru --save-devñamoĩ hag̃ua señal koꞌã dependencia haꞌeha desarrollo jeporurãnte ha ndahaꞌeiha producción-pe g̃uarã.

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

  3. Emoĩ Bootstrap. Ko’áĝa ikatu ñamoĩ Bootstrap. Avei romoĩta Popper ore dropdown, popover ha tembipuru’i odepende guive hese oñemohenda hag̃ua. Ndereplaneairamo reipuru hag̃ua umi componente, ikatu remboyke Popper ko’ápe.

    npm i --save bootstrap @popperjs/core

  4. Emoĩ umi dependencia adicional. Webpack ha Bootstrap ykére, ñaikotevẽve mbovymi dependencia jagueru ha ñambojoaju porã hag̃ua Bootstrap CSS ha JS Webpack ndive. Ko’ãva apytépe oĩ Sass, oĩ cargador ha Autoprefixer.

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

Koꞌág̃a jaguerekóma opaite dependencia oñeikotevẽva oñemboguapýva, ikatu ñañepyrũ ñambaꞌapo jajapóvo umi proyecto rembiapokue ha ñamoinge Bootstrap.

Proyecto estructura rehegua

Rojapóma pe my-projectcarpeta ha roñepyrũma npm. Koꞌág̃a jajapóta avei ñande srcha distcarpetakuéra ñamohuꞌa hag̃ua proyecto estructura. Emombaꞌapo koꞌa mbaꞌe my-project, térã ejapo nde po rupive kundaha ha vore ñemohenda ojehechaukáva iguýpe.

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

Rejapopa rire, ne proyecto completo ojehechava’erã kóicha:

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

Ko’áĝaite, opa mba’e oĩ hendaitépe, ha katu Webpack nomba’apói noromyenyhẽigui webpack.config.jsgueteri ore.

Emohenda Webpack rehegua

Oñemoĩvo umi dependencia ha ñande proyecto carpeta oĩmava ñañepyrũ hag̃ua codificación, koꞌág̃a ikatu ñamohenda Webpack ha ñamombaꞌapo ñande proyecto localmente.

  1. Eipe’a webpack.config.jsnde editor-pe. Oĩgui en blanco, tekotevẽta ñamoĩ hese michĩmi boilerplate config ikatu hag̃uáicha ñamoñepyrũ ñande servidor. Ko config pehẽngue heꞌi Webpack-pe oheka hag̃ua ore proyecto JavaScript, moõpa osẽvaꞌerã kódigo oñembohekopyréva ( dist), ha mbaꞌeichaitépa oñekomportavaꞌerã servidor desarrollo rehegua (ojepeꞌavaꞌerã distcarpeta-gui recarga haku reheve).

    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. Upe rire ñamyenyhẽ ñande dist/index.html. Kóva ha’e HTML página Webpack okargáta kundahárape oipuru hag̃ua CSS ha JS oñembojoajúva ñamoĩtava hese umi tembiaporã oúvape. Upéva jajapo mboyve, ñameꞌevaꞌerã chupe peteĩ mbaꞌe ojehechauka hag̃ua ha oike hag̃ua outputJS pe paso mboyvegua guive.

    <!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>

    Roike hína ko’ápe michĩmi Bootstrap estilo rehegua pe div class="container"ha <button>ikatu hag̃uáicha rohecha araka’épa ojekarga Bootstrap CSS Webpack rupive.

  3. Koꞌág̃a ñaikotevẽ peteĩ script npm rehegua ñamombaꞌapo hag̃ua Webpack. Eipe’a package.jsonha emoĩve pe startscript ojehechaukáva iguýpe (reguerekómava’erã pe script prueba rehegua). Roipurúta ko script romoñepyrũ hag̃ua ore servidor dev Webpack local.

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

  4. Ha ipahápe, ikatu ñamoñepyrũ Webpack. Pe my-projectkundaha oĩva nde terminal-pe guive, emongu’e upe script npm oñembojoapy pyahúva:

    npm start
    Webpack dev servidor oñemboguatáva

Ko ñembohekopyrã vore oúva ha ipahaitépe, ñamohendava’erã umi Webpack kargador ha ñamoinge opaite Bootstrap CSS ha JavaScript.

Importación Ñepyrũrã

Ojegueru hag̃ua Bootstrap Webpack-pe oikotevẽ umi kargador romoĩva’ekue peteĩha vore’ípe. Romoĩma chupekuéra npm ndive, ha katu ko’áĝa tekotevẽ oñemboheko Webpack ojepuru hag̃ua.

  1. Emohenda umi cargador -pe webpack.config.js. Ko’áĝa ne rembiapokue ñembohekorã oñembotýma ha ojoaju va’erã pe ñe’ẽmondo iguýpe. Pe parte pyahu añoite ko’ápe ha’e pe 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'
          }
        ]
      }
    ]
  }
}

    Ko'ápe oî peteî recapitular mba'érepa ñaikotevê opa ko'ã cargador. style-loaderomoinge CSS peteĩ <style>elemento-pe <head>oĩva HTML página-pe, css-loaderoipytyvõ ojeporúvo @importha url(), postcss-loaderoñeikotevẽ Autoprefixer-pe g̃uarã, ha sass-loaderoheja ñandéve jaipuru Sass.

  2. Koꞌág̃a, ñamoinge Bootstrap CSS. Emoĩ ko’ãva src/scss/styles.scssto emoinge hag̃ua opaite Bootstrap ypykue Sass.

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

    Ikatu avei regueru ore hoja de estilo peteĩteĩ reipotáramo. Emoñe’ẽ ore Sass import docs rehegua umi detalle rehegua.

  3. Upe rire jakarga CSS ha ñamoinge Bootstrap JavaScript. Emoĩ ko’ãva src/js/main.jsto ekargávo CSS ha emoinge opaite Bootstrap JS. Popper ojegueru jeýta ijeheguiete Bootstrap rupive.

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

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

    Ikatu avei emoinge JavaScript plugins peteĩteĩ tekotevẽháicha eñongatu hag̃ua umi paquete tuichakue oguejy:

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

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

    Emoñe’ẽ ore JavaScript kuatiañe’ẽ reikuaave hag̃ua mba’éichapa ojepurukuaa Bootstrap ñembohekopyrã.

  4. Ha nde rejapopa! 🎉 Bootstrap ypykue Sass ha JS ojekargapaitévo, ne servidor desarrollo local ko’áĝa ojehechava’erã péicha.

    Webpack dev servidor oñemboguatáva Bootstrap ndive

    Ko’áĝa ikatu eñepyrũ emoĩve oimeraẽva componente Bootstrap rehegua reipuruséva. Ejesareko katuete Webpack techapyrã proyecto hekoitépe mba’éichapa ikatu emoinge Sass personalizado adicional ha emoporãve ne ñemopu’ã eguerúvo Bootstrap CSS ha JS pehẽngue añoite reikotevẽva.

Umi optimización producción rehegua

Ojesarekóva ne ñembosako’íre, ikatu emoañetéta peteĩva umi optimización adicional seguridad ha velocidad rehegua ideprovéchova emongu’e hag̃ua proyecto producción-pe. Eñamindu’u ko’ã mba’eporã ndojeporúiha Webpack techapyrã proyecto -pe ha nde pópe oĩ remboguata hag̃ua.

Ojepe’ávo CSS

Pe style-loaderromohendavaꞌekue yvateve omondo convenientemente CSS pe paquete-pe ani hag̃ua oñeikotevẽ ojekarga manualmente peteĩ CSS vore ipype dist/index.html. Ko enfoque ikatu nomba’apói peteĩ Política de Seguridad de Contenido estricto ndive, jepémo upéicha, ha ikatu oiko chugui peteĩ cuello de botella nde aplicación-pe tuicha rupi paquete tuichakue.

Ojepeꞌa hag̃ua CSS ikatu hag̃uáicha jakarga directamente dist/index.html, eipuru mini-css-extract-loaderWebpack plugin.

Ñepyrũrã, emoĩ pe plugin:

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

Upéi emoĩ instancia ha eipuru pe plugin Webpack ñembohekorãme:

--- 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
           },
           {

Oñemboguata npm run buildjey rire, oĩta peteĩ vore pyahu dist/main.css, oguerekótava opaite CSS oguerúva src/js/main.js. Ehecháramo dist/index.htmlne kundahárape ko’áĝa, ofaltáta pe estilo, ko’áĝa oĩháicha dist/main.css. Ikatu emoinge CSS oñembohekopyréva dist/index.htmlkóicha:

--- 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>

Ojepe’ávo umi SVG rembiapokue

Bootstrap CSS oguereko heta ñe’ẽmondo SVG vore rehegua data:URI línea ryepýpe rupive. Emohenda ramo peteĩ Polítika Ñeñangareko Contenido rehegua ne rembiaporãme g̃uarã ojokóva data:URI taꞌãngamýime g̃uarã, upéicharamo koꞌã SVG vore ndojekargamoꞌãi. Ikatu ejere ko apañuãire eipe’ávo umi SVG vore en línea eipurúvo Webpack mba’ekuaarã módulo activo rehegua.

Emohenda Webpack eipe’a hag̃ua SVG vore’i ryepypegua kóicha:

--- 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: [

Oñemboguata npm run buildjey rire, rejuhúta umi SVG vore ojeipeꞌavaꞌekue CSS-pe dist/iconsha oñemboheko porãva CSS-gui.

¿Rehechápa koʼápe peteĩ mbaʼe naiporãiva térã ndojeporúiva? Eipe’a peteĩ mba’e’oka GitHub -pe . ¿Reikotevẽ pytyvõ oñemyatyrõ hag̃ua? Eheka térã emoñepyrũ peteĩ ñomongeta GitHub-pe.