in English

Bootstrap & Webpack

Ny torolalana ofisialy momba ny fomba hampidirana sy hamehezana ny CSS sy JavaScript an'ny Bootstrap amin'ny tetikasanao amin'ny fampiasana Webpack.

Amin'ity pejy ity

Te hitsambikina hatramin'ny farany? Ampidino ny kaody loharano sy ny demo miasa ho an'ity torolàlana ity avy amin'ny tahiry twbs/examples . Azonao atao ihany koa ny manokatra ny ohatra ao amin'ny StackBlitz ho an'ny fanitsiana mivantana.

Hametraka

Manangana tetikasa Webpack miaraka amin'ny Bootstrap hatrany am-boalohany izahay, noho izany dia misy fepetra takiana sy dingana aloha vao tena manomboka. Ity torolàlana ity dia mitaky anao hametraka ny Node.js ary mahafantatra ny terminal.

Mamorona lahatahiry tetikasa ary amboary npm. Hamorona ny my-projectlahatahiry isika ary hanomboka ny npm miaraka amin'ny -ytohan-kevitra mba hialana amin'ny fametrahana ny fanontaniana mifandraika aminay.
```
mkdir my-project && cd my-project
npm init -y
```
Mametraka Webpack. Avy eo dia mila mametraka ny fiankinan-doha amin'ny fampandrosoana Webpack isika: webpackho an'ny fototry ny Webpack, webpack-climba hahafahantsika mampandeha baiko Webpack avy amin'ny terminal, ary webpack-dev-servermba hahafahantsika mitantana mpizara fampandrosoana eo an-toerana. Mampiasa --save-devfamantarana izahay fa ireo fiankinan-doha ireo dia natao ho an'ny fampandrosoana ihany fa tsy ho an'ny famokarana.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
Mametraka Bootstrap. Afaka mametraka Bootstrap isika izao. Hametraka Popper ihany koa izahay satria miankina amin'ny toerana misy azy ny dropdowns, popovers, ary ny tooltips. Raha tsy mikasa ny hampiasa ireo singa ireo ianao dia azonao atao ny manala ny Popper eto.
```
npm i --save bootstrap @popperjs/core
```
Mametraka fiankinana fanampiny. Ho fanampin'ny Webpack sy Bootstrap, mila fiankinan-doha vitsivitsy isika mba hanafatra sy hamatotra ny CSS sy JS an'ny Bootstrap miaraka amin'ny Webpack. Anisan'izany ny Sass, ny loader sasany ary ny Autoprefixer.
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

Amin'izao fotoana izao dia manana ny fiankinan-doha ilaina rehetra isika, afaka manomboka miasa amin'ny famoronana ny rakitra tetikasa ary manafatra Bootstrap.

Rafitra tetikasa

Efa namorona ny my-projectlahatahiry izahay ary nanangana npm. Ankehitriny dia hamorona ny antsika srcsy ny distlahatahiry ihany koa isika mba hamenoana ny rafitry ny tetikasa. Alefaso avy amin'ny my-project, na mamorona ny lahatahiry sy ny firafitry ny rakitra aseho etsy ambany.

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

Rehefa vita ianao dia tokony ho toy izao ny tetikasanao manontolo:

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

Amin'izao fotoana izao, ny zava-drehetra dia eo amin'ny toerana mety, saingy tsy mandeha ny Webpack satria tsy mbola nameno ny anay izahay webpack.config.js.

Amboary ny Webpack

Miaraka amin'ny fiankinan-doha napetraka sy ny lahatahiry tetikasanay efa vonona hanomboka ny kaody, dia afaka manitsy ny Webpack izahay ary mampandeha ny tetikasanay eo an-toerana.

Sokafy webpack.config.jsao amin'ny editor-nao. Satria banga ilay izy, dia mila ampiana config boilerplate ao aminy isika mba hahafahantsika manomboka ny mpizara. Ity ampahany amin'ny config ity dia milaza amin'ny Webpack fa hikaroka ny JavaScript an'ny tetikasantsika, aiza no hamoahana ny kaody voaangona ho ( dist), ary ny fomba tokony hitondran'ny mpizara fampandrosoana (misintona avy amin'ny distlahatahiry miaraka amin'ny famerenana mafana).
```
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
  }
}
```

Avy eo dia fenoy ny dist/index.html. Ity ny pejy HTML hapetraka ao amin'ny navigateur ny Webpack mba hampiasana ny CSS sy JS amboarina izay ampianay amin'ny dingana manaraka. Alohan'ny ahafahantsika manao an'izany dia tsy maintsy manome azy zavatra isika mba hamerenana sy hampidirana ny outputJS avy amin'ny dingana teo aloha.

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

Ampidirinay eto ny styling Bootstrap kely miaraka amin'ny div class="container"ary <button>mba ho hitantsika rehefa entin'ny Webpack ny CSS Bootstrap.

Mila script npm isika izao hampandehanana Webpack. Sokafy package.jsonary ampio ny startscript aseho eto ambany (tokony efa manana ny script fitsapana ianao). Hampiasa ity script ity izahay hanombohana ny mpizara Webpack dev ao an-toerana.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ary farany, afaka manomboka Webpack isika. Avy amin'ny my-projectlahatahiry ao amin'ny terminal-nao, tadiavo ilay script npm vao nampidirina:
```
npm start
```

Ao amin'ny fizarana manaraka sy farany amin'ity torolalana ity, dia hametraka ny Webpack loaders izahay ary manafatra ny CSS sy JavaScript rehetra an'ny Bootstrap.

Import Bootstrap

Ny fanafarana Bootstrap ao amin'ny Webpack dia mitaky ny loader napetrakay ao amin'ny fizarana voalohany. Nametraka azy ireo tamin'ny npm izahay, fa ny Webpack izao dia mila amboarina hampiasa azy ireo.

Amboary ny loaders amin'ny webpack.config.js. Vita izao ny fisie fanefena anao ary tokony hifanaraka amin'ny snippet etsy ambany. Ny hany ampahany vaovao eto dia ny modulefizarana.

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

Ity misy famintinana ny antony ilantsika ireo loader rehetra ireo. style-loadermanindrona ny CSS ho <style>singa iray ao amin'ny <head>pejy HTML, css-loadermanampy amin'ny fampiasana @importsy url(), postcss-loadertakiana amin'ny Autoprefixer, ary sass-loadermamela antsika hampiasa Sass.

Ankehitriny, andao hanafatra ny CSS Bootstrap. Ampio ity manaraka ity src/scss/styles.scssmba hanafatra ny loharanon'ny Bootstrap rehetra Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Azonao atao ihany koa ny manafatra ny stylesheets tsirairay raha tianao. Vakio ny antontan-taratasy fanafarana Sass ho an'ny antsipiriany.
Avy eo dia mameno ny CSS isika ary manafatra JavaScript's Bootstrap. Ampio ireto manaraka ireto mba src/js/main.jshampidirana ny CSS ary manafatra ny JS Bootstrap rehetra. Hafatra ho azy amin'ny alàlan'ny Bootstrap ny Popper.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Azonao atao ihany koa ny manafatra plugins JavaScript tsirairay raha ilaina mba hampihenana ny haben'ny fonosana:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Vakio ny docs JavaScript raha mila fanazavana fanampiny momba ny fampiasana ny plugins Bootstrap.
Ary vita ianao! 🎉 Miaraka amin'ny loharanon'i Bootstrap Sass sy JS feno feno, dia tokony ho toy izao ny lohamilina fampandrosoana eo an-toerana.

Afaka manomboka mampiditra singa Bootstrap tianao hampiasaina ianao izao. Aza hadino ny mijery ny tetikasa ohatra Webpack feno momba ny fomba hampidirana Sass mahazatra fanampiny sy hanatsara ny fanangananao amin'ny alàlan'ny fanafarana afa-tsy ny ampahany amin'ny CSS sy JS an'ny Bootstrap izay ilainao.

Fanatsarana ny famokarana

Miankina amin'ny fanamboaranao, azonao atao ny mampihatra fiarovana fanampiny sy fanatsarana hafainganana ilaina amin'ny fampandehanana ny tetikasa amin'ny famokarana. Mariho fa tsy ampiharina amin'ny tetikasa ohatra Webpack ireo fanatsarana ireo ary anjaranao ny mampihatra.

Fanalana CSS

Ny style-loadernamboarintsika etsy ambony dia mamoaka CSS amin'ny fonosana ka tsy ilaina ny mampiditra rakitra CSS amin'ny tanana dist/index.html. Ity fomba fiasa ity dia mety tsy miasa miaraka amin'ny Politika fiarovana amin'ny atiny, na izany aza, ary mety ho lasa sakana amin'ny fampiharana anao noho ny haben'ny fonosana lehibe.

Mba hanasarahana ny CSS mba ahafahantsika mampiditra azy mivantana avy amin'ny dist/index.html, ampiasao ny mini-css-extract-loaderplugin Webpack.

Voalohany, apetraho ny plugin:

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

Avy eo dia asio ary ampiasao ny plugin ao amin'ny konfigurasi 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
           },
           {

Rehefa mandeha npm run buildindray dia hisy rakitra vaovao dist/main.css, izay ahitana ny CSS rehetra nafaran'i src/js/main.js. Raha mijery dist/index.htmlao amin'ny navigateur ianao izao, dia tsy hita ilay fomba, satria ao amin'ny dist/main.css. Azonao atao ny mampiditra ny CSS noforonina dist/index.htmltoy izao:

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

Fanalana rakitra SVG

Ny CSS Bootstrap dia ahitana references marobe amin'ny rakitra SVG amin'ny alàlan'ny data:URI inline. Raha mamaritra Politika fiarovana amin'ny atiny ho an'ny tetikasanao ianao izay manakana ny data:URI ho an'ny sary, dia tsy hivoaka ireo rakitra SVG ireo. Azonao atao ny miala amin'ity olana ity amin'ny alàlan'ny fanesorana ireo rakitra SVG an-tserasera amin'ny alàlan'ny endri-javatra maody fananan'ny Webpack.

Ampifanaraho ny Webpack hanesorana ireo rakitra SVG inline toy izao:

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

Rehefa avy mihazakazaka npm run buildindray ianao dia ho hitanao ny rakitra SVG nalaina tao dist/iconsary nalaina avy amin'ny CSS.

Mahita zavatra tsy mety na efa lany andro eto? Sokafy olana iray ao amin'ny GitHub azafady . Mila fanampiana hamahana olana? Mitadiava na manomboka fifanakalozan-kevitra ao amin'ny GitHub.