in English

Correa de Arranque y Webpack

Kay oficial pusaq imayna Bootstrap kaqpa CSS chaymanta JavaScript ruwanaykipi Webpack kaqwan churanapaq chaymanta huñunapaq.

Kay p'anqapi

¿Tukuykama saltayta munankichu? Kay yanapakuypaq pukyuta chaymanta llamkana demota twbs/ejemplos waqaychasqamanta uraykachiy . Kawsaq llamk'achinapaq StackBlitz kaqpi rikch'anatapas kichayta atikunki .

Tupachiy

Huk Webpack ruwayta Bootstrap kaqwan zero kaqmanta ruwachkayku, chayrayku wakin ñawpaq requisitos chaymanta ñawpaq llamkanakuna kanku manaraq chiqamanta qallariyta atichkayku. Kay yanapakuyqa Node.js churasqayuq kanaykita munan chaymanta wakin riqsisqa terminal kaqwan.

Crea una carpeta de proyecto y configurar npm. Carpeta ruwasaqku my-projectchaymanta npm -yargumentowan qallarisaqku mana llapa interactivo tapuykunata tapuwananchikpaq.
```
mkdir my-project && cd my-project
npm init -y
```
Webpack nisqapi churay. Qatiqninpi Webpack wiñachiy hapipakuyniyku churanayku tiyan: webpackWebpackpa ukhunpaq, webpack-clichaymanta Webpack kamachiykunata terminalmanta webpack-dev-serverpurichiyta atiykuman, chaymanta chaymanta huk kiti wiñachiy sirwiq purichiyta atiykuman. Utilizayku --save-devseñalanaykupaq kay dependenciakuna wiñariypaq llamk'anapaqlla kasqankuta manataq ruruchinapaqchu.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
Bootstrap nisqa churay. Kunanqa Bootstrap nisqatam churachwan. Poppertapas churasaqku chaymanta urayk'aqniyku, popoversniyku, chaymanta yanapakuyniyku chaymanta chaymanta posiciónninkupaq hapirinku. Sichus mana chay componentekuna llamk'achiyta yuyankichu, kaypi Popperta saqiyta atinki.
```
npm i --save bootstrap @popperjs/core
```
Huk dependenciakunata churay. Webpack chaymanta Bootstrap kaqmanta, huk pisi aswan hapipakuykunata necesitayku allinta yaykuchinapaq chaymanta Bootstrap kaqpa CSS chaymanta JS Webpack kaqwan huñunapaq. Chaykunaqa Sass, wakin kargaqkuna, Autoprefixer nisqakunam.
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

Kunanqa llapa necesario dependenciakuna churasqa kayku, llamk'ayman chayayta atiykuman proyecto willakuykunata ruwaspa chaymanta Bootstrap apamuspa.

Estructura del proyecto

Ñam chay my-projectqillqana mayt'uta ruwarqaykuña hinaspa npm nisqatapas qallarirqaykuña. Kunanqa ruwasuntaqmi ñuqaykupa srcchaymanta distcarpetakunatapas proyectopa estructuranta muyurichinapaq. Kayta purichiy my-project, utaq makiwan ruway qillqana mayt'uta chaymanta willañiqi estructurata uraypi rikuchisqa.

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

Tukuruspaykiqa, hunt'asqa proyectoyki kayhinam kanan:

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

Kaypi, tukuy imapas allin kaqpi kachkan, ichaqa Webpack mana llamkanqachu imaraykuchus manaraq hunt'achiykuchu ñuqaykupaq webpack.config.js.

Webpack nisqamanta wakichiy

Dependenciakuna churasqa kaqwan chaymanta proyecto carpetayku listo kachkan codificación qallariypaq, kunan Webpack ruwayta atiyku chaymanta proyectoykuta llaqtapi purichiyta atiyku.

Editorniykipi kichay webpack.config.js. Ch'usaq kasqanrayku, wakin boilerplate config chayman yapanayku tiyan chaymanta servidorniyku qallariyta atiykuman. Kay parte config willan Webpack karqan maskanapaq proyectoykupa JavaScript kaqninta, maypi lluqsichinapaq huñusqa codigota ( dist), chaymanta imayna wiñachiy servidor ruwanan tiyan ( distcarpetamanta aysaspa ruphay musuqmanta kargawan).
```
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
  }
}
```

Chaymantataq hunt'achiyku dist/index.html. Kayqa HTML p'anqa Webpack maskaqpi kargakunqa huñusqa CSS chaymanta JS llamk'achinapaq chaymanta qhipa llamkanakunapi yapasunchik. Manaraq chayta ruwachkaspa, imapas ruwanapaq qunanchik tiyan chaymanta outputñawpaq llamkanamanta JS nisqa churananchik tiyan.

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

Kaypi huk chhika Bootstrap estilo ruwayta div class="container"chaymanta chaymanta <button>chaymanta rikusqayku mayk'aq Bootstrap CSS Webpack kaqwan kargasqa kachkan.

Kunanqa Webpack purichinapaq huk npm scriptta necesitanchik. Kichaspa uraypi rikuchisqa qillqa mayt'uta package.jsonyapay start(prueba qillqa mayt'utayuqña kanayki tiyan). Kay qillqa mayt'uta llamk'achisaqku llaqta Webpack dev sirwiqniyku qallariypaq.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Hinaspa tukupaypiqa, Webpack nisqatam qallarichwan. Terminalniykipi qillqana my-projectmayt'umanta, chay musuq yapasqa npm qillqa mayt'uta purichiy:
```
npm start
```

Kay pusaqpa qatiqnin chaymanta qhipa t'aqapi, Webpack kargaqkunata churasaqku chaymanta llapa Bootstrap kaqpa CSS chaymanta JavaScript kaqninta apamusaqku.

Importar Correa de Arranque

Bootstrap Webpack kaqman yaykuchiyqa ñawpaq t'aqapi churasqayku kargaqkunata munan. Chaykunata npm kaqwan churarqayku, ichaqa kunan Webpack chayta llamk'achinapaq wakichisqa kanan tiyan.

Kaypi kargaqkunata churay webpack.config.js. Kunanqa wakichisqa willañiqiykiqa hunt'asqañam, uraypi kaq t'aqawan tupananmi. Kaypiqa musuq rakillam moduleraki.

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'
          }
        ]
      }
    ]
  }
}

Kaypi huk recap imaraykum tukuy kay cargadores nisqakunata necesitanchik. style-loaderinyecta CSS huk <style>elemento kaqpi chaymanta <head>chaymanta HTML p'anqapi, css-loaderyanapakun llamk'achiyta @importchaymanta url(), postcss-loaderAutoprefixer kaqpaq mañakun, chaymanta sass-loaderSass llamk'achiyta saqin.

Kunanqa, Bootstrap kaqpa CSS kaqninta apamusun. Kay qatiqman yapay src/scss/styles.scssllapa Bootstrap kaqpa pukyuta Sass kaqmanta apamunaykipaq.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Munaspaqa sapankama estilo raphiykutapas apamuyta atinki. Ñawinchay Sass import docs nisqaykumanta aswan sut'inchaykunapaq.
Chaymanta CSS kaqmanta kargayku chaymanta Bootstrap JavaScript kaqninta apamuyku. Kay qatiqman yapay src/js/main.jsCSS kargananpaq chaymanta llapa Bootstrap kaqpa JS kaqninta apamunanpaq. Popper kikinmanta Bootstrap kaqnintakama apamusqa kanqa.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
JavaScript plugins nisqakunatapas sapankama apamuyta atinki necesitasqanman hina, huñusqa sayaykunata pisiyachinaykipaq:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Ñawiriy JavaScript qillqayku aswan willakuypaq imayna Bootstrap plugins llamk'achiyta.
¡Hinaspapas tukurunkiñam! 🎉 Bootstrap kaqpa pukyun Sass chaymanta JS hunt'asqa kargasqa kaptin, llaqta wiñachiy sirwiqniyki kunan kayhina rikch'akunan tiyan.

Kunanqa mayqin Bootstrap componentes llamk'achiyta munanki yapayta qallariyta atikunki. Aswan allinta qhaway hunt'asqa Webpack ejemplo proyectota imayna yapasqa sapanchasqa Sass churanaykipaq chaymanta ruwayniyki allinchay Bootstrap kaqpa CSS chaymanta JS kaqpa partenkunalla necesitasqaykita apamuspa.

Producción nisqa allinchaykuna

Configuracionniykimanta, wakin yapasqa harkasqa chaymanta utqaylla allinchaykunata ruwayta munankiman allin proyecto ruwaypi purichinapaq. Reparay kay allinchaykuna mana Webpack ejemplo proyectopi ruwasqachu chaymanta qammanta ruwanayki tiyan.

CSS nisqamanta hurquy

Chay style-loaderpatamanta ruwasqayku convenientemente CSS huñuman kacharin chaymanta makiwan huk CSS willañiqita kaypi dist/index.htmlmana necesariochu. Kay ruwayqa mana huk sinchi Contenido Waqaychasqa Kamachiywan llamkanmanchu, ichaqa, chaymanta huk cuello de botella kaqman tukunman ruwanaykipi hatun paquete sayayninrayku.

CSS t'aqanapaq chaymanta chiqalla kaymanta kargayta atiykuman dist/index.html, mini-css-extract-loaderWebpack plugin kaqwan llamk'achiy.

Ñawpaqta, plugin nisqa churay:

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

Chaymanta instanciay chaymanta Webpack ruwanapi plugin llamk'achiy:

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

Hukmanta purichiymanta npm run build, musuq willañiqi dist/main.csskanqa , chaypi llapa CSS apamusqa kanqa src/js/main.js. Kunan maskaqniykipi qhawanki dist/index.htmlchayqa, estiloqa chinkanqa, kunan hina dist/main.css. Rurasqa CSS nisqataqa kayhinapi churayta atinki dist/index.html:

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

SVG willañiqikunata hurquy

Bootstrap kaqpa CSS kaqninqa achka riqsichiykunata SVG willañiqikunaman inline data:URIs kaqnintakama churan. Sichus huk ruwanaykipaq Contenido Waqaychasqa Kamachiyta riqsichinki mayqinchus data:URIs siq'ikunapaq harkan, chaymanta kay SVG willañiqikuna mana kargakunqachu. Kay sasachakuymanta muyuriyta atikunki, Webpack kaqpa kaqniyuq módulos ruwayta llamk'achispa, chiru ukhupi SVG willañiqikunata hurquspa.

Webpack nisqata wakichiy kayhinata chiru ukhupi SVG willañiqikunata hurqunapaq:

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

Wakmanta purichiymanta npm run build, tarinki SVG willañiqikunata dist/iconsCSS kaqman hurqusqa chaymanta allinta riqsichisqa.

¿Imapas mana allintachu icha mawk’a kaqtachu kaypi rikunki? Ama hina kaspa , GitHub nisqapi huk sasachakuy kichay . ¿Yanapayta necesitankichu sasachakuy allichaypi? GitHub kaqpi maskay utaq rimanakuy qallariy .