Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
Check
in English

Bootstrap & Wɛbsaet a wɔde di dwuma

Akwankyerɛ a ɛyɛ aban de a ɛfa sɛnea wode Bootstrap CSS ne JavaScript bɛka ho na woaboaboa ano wɔ wo adwuma no mu denam Webpack so.

Wɔ kratafa yi so
Wopɛ sɛ wuhuruw kɔ awiei? Twe source code ne adwumayɛ demo ma akwankyerɛ yi fi twbs/examples akorae . Wubetumi nso abue nhwɛso no wɔ StackBlitz mu ama live editing.

Hyehyɛ

Yɛreyɛ Webpack adwuma bi a ɛne Bootstrap fi mfiase, enti nneɛma bi wɔ hɔ a ɛsɛ sɛ wodi kan yɛ ne anammɔn a ɛwɔ anim ansa na yɛatumi afi ase ankasa. Saa akwankyerɛ yi hwehwɛ sɛ wowɔ Node.js a wɔde ahyɛ mu na woahu terminal no yiye kakra.

  1. Yɛ project folda na hyehyɛ npm. Yɛbɛbɔ my-projectfolda no na yɛde argument no ahyɛ npm ase -ysɛnea ɛbɛyɛ a ɛrenbisa yɛn nsɛmmisa a ɛfa nkitahodi ho no nyinaa.

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

  2. Fa Webpack no hyɛ wo kɔmputa so. Nea edi hɔ no ɛsɛ sɛ yɛde yɛn Webpack nkɔso dependencies no hyɛ mu: webpackma Webpack no mu ade titiriw, webpack-clisɛnea ɛbɛyɛ a yebetumi ayɛ Webpack ahyɛde ahorow afi terminal no so, na webpack-dev-serversɛnea ɛbɛyɛ a yebetumi ayɛ local development server. Yɛde --save-devkyerɛ sɛ saa nneɛma a egyina so yi yɛ nkɔso a wɔde bedi dwuma nkutoo na ɛnyɛ nneɛma a wɔyɛ.

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

  3. Fa Bootstrap no hyɛ wo kɔmputa so. Afei yebetumi ahyɛ Bootstrap no. Yɛbɛsan nso ahyɛ Popper ɛfiri sɛ yɛn dropdowns, popovers, ne tooltips gyina so ma wɔn gyinabea. Sɛ woanyɛ nhyehyɛe sɛ wode saa nneɛma no bedi dwuma a, wubetumi ayi Popper afi mu wɔ ha.

    npm i --save bootstrap @popperjs/core

  4. Fa dependencies afoforo hyɛ mu. Wɔ Webpack ne Bootstrap akyi no, yehia dependencies kakraa bi bio na ama yɛatumi de Bootstrap CSS ne JS no aba na yɛde Webpack abɔ mu yiye. Eyinom bi ne Sass, loaders binom, ne Autoprefixer.

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

Seesei a yɛanya dependencies a ɛhia nyinaa ahyɛ mu no, yɛbɛtumi akɔ adwuma mu ayɛ project files no na yɛde Bootstrap aba.

Dwumadie no nhyehyeɛ

Yɛayɛ my-projectfolda no dedaw na yɛahyɛ npm ase. Afei yɛbɛsan nso ayɛ yɛn srcne distfolda ahorow no de ayɛ adwuma no nhyehyɛe no kurukuruwa. Fa nea edidi so yi fi my-project, anaa fa nsa yɛ folda ne fael nhyehyɛe a wɔakyerɛ wɔ ase ha no.

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

Sɛ wowie a, ɛsɛ sɛ wo adwuma a edi mũ no te sɛ eyi:

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

Saa bere yi, biribiara wɔ beae a ɛfata, nanso Webpack rennyɛ adwuma efisɛ yennya nhyɛɛ yɛn de no ma webpack.config.js.

Hyehyɛ Webpack no ho nhyehyɛe

Sɛ yɛde dependencies ahyɛ mu na yɛn project folder no ayɛ krado ama yɛn sɛ yɛbɛhyɛ aseɛ ayɛ coding a, afei yɛbɛtumi asiesie Webpack na yɛayɛ yɛn project no wɔ locally.

  1. Bue webpack.config.jswɔ wo editor no mu. Esiane sɛ ɛyɛ blank nti, ɛho behia sɛ yɛde boilerplate config bi ka ho sɛnea ɛbɛyɛ a yebetumi afi yɛn server no ase. Saa config no fã yi ka kyerɛ Webpack sɛ ɛsɛ sɛ wɔhwehwɛ yɛn project no JavaScript, baabi a ɛsɛ sɛ wɔde code a wɔaboaboa ano no kɔ ( dist), ne sɛnea ɛsɛ sɛ development server no yɛ n’ade (twe fi distfolda no mu a 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. Nea edi hɔ no yɛhyɛ yɛn dist/index.html. Eyi ne HTML krataafa a Webpack bɛ load wɔ browser no mu de adi dwuma bundled CSS ne JS a yɛde bɛka ho wɔ akyiri yi anammɔn mu. Ansa na yɛbɛtumi ayɛ saa no, ɛsɛ sɛ yɛma no biribi a ɛbɛkyerɛ ase na yɛde outputJS a ɛfiri anammɔn a atwam no mu no ka ho.

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

    Yɛde Bootstrap styling kakra ka ho wɔ ha ne div class="container"ne <button>sɛnea ɛbɛyɛ a yebehu bere a Bootstrap CSS no Webpack de ahyɛ mu.

  3. Afei yɛhia npm script na yɛde ayɛ Webpack. Bue package.jsonna fa startscript a wɔakyerɛ wɔ aseɛ ha no ka ho (ɛsɛ sɛ wowɔ sɔhwɛ script no dedaw). Yɛde saa script yi bedi dwuma de ahyɛ yɛn local Webpack dev server no ase.

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

  4. Na awiei koraa no, yebetumi afi ase Webpack. Efi my-projectfolda a ɛwɔ wo terminal no mu no, fa saa npm script foforo a wode aka ho no kɔ:

    npm start
    Webpack dev server a ɛreyɛ adwuma

Wɔ ɔfa a edi hɔ ne nea etwa to wɔ akwankyerɛ yi mu no, yɛbɛhyehyɛ Webpack loaders no na yɛde Bootstrap CSS ne JavaScript nyinaa aba.

Fa Bootstrap no ba

Bootstrap a yɛde bɛba Webpack mu no hwehwɛ sɛ yɛde loaders a yɛde ahyɛ mu wɔ ɔfa a edi kan no mu. Yɛde npm ahyɛ mu, nanso seesei ɛhia sɛ wɔhyehyɛ Webpack ma wɔde bedi dwuma.

  1. Fa nneɛma a wɔde gu mu no si hɔ wɔ webpack.config.js. Wo nhyehyeɛ fael no awie seesei na ɛsɛ sɛ ɛne snippet a ɛwɔ aseɛ ha no hyia. Ɔfã foforo biako pɛ a ɛwɔ ha ne moduleɔfã no.

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

    Nea enti a yehia saa loaders yi nyinaa ho nsɛm foforo ni. style-loaderde CSS no gu <style>element bi mu wɔ <head>HTML krataafa no mu, css-loaderɛboa ma wɔde di dwuma @importne url(), postcss-loaderɛho hia ma Autoprefixer, na sass-loaderɛma yɛn kwan ma yɛde Sass di dwuma.

  2. Afei, momma yɛmfa Bootstrap no CSS mmra. Fa nea edidi so yi ka ho na src/scss/styles.scssfa Bootstrap no fibea Sass nyinaa ba.

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

    Wubetumi nso de yɛn stylesheets no aba ankorankoro sɛ wopɛ a. Kenkan yɛn Sass import docs no na woanya nsɛm no ho nsɛm.

  3. Nea edi hɔ no yɛde CSS no gu mu na yɛde Bootstrap no JavaScript no ba. Fa nea edidi so yi ka ho src/js/main.jsna fa CSS no hyɛ mu na fa Bootstrap JS no nyinaa ba. Popper bɛfa Bootstrap so aba ankasa.

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

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

    Wubetumi nso de JavaScript plugins aba mmiako mmiako sɛnea ɛho hia na ama bundle akɛse akɔ fam:

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

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

    Kenkan yɛn JavaScript docs no na woanya nsɛm pii afa sɛnea wode Bootstrap no plugins bedi dwuma ho.

  4. Na woawie! 🎉 Bere a Bootstrap no fibea Sass ne JS ahyɛ mu ma no, ɛsɛ sɛ wo mpɔtam hɔ nkɔso server no mprempren te sɛ eyi.

    Webpack dev server a ɛreyɛ adwuma wɔ Bootstrap so

    Afei wobɛtumi ahyɛ aseɛ de Bootstrap components biara a wopɛ sɛ wode di dwuma no aka ho. Hwɛ hu sɛ wobɛhwɛ Webpack nhwɛso adwuma a edi mũ no ama sɛnea wode Sass foforo a wɔahyɛ da ayɛ aka ho na woayɛ wo dan no yiye denam Bootstrap CSS ne JS no afã horow a wuhia nkutoo a wode bɛba no so.

Nneɛma a wɔyɛ no yiye

Ɛgyina wo nhyehyeɛ so no, ebia wobɛpɛ sɛ wode ahobanbɔ ne ahoɔhare a ɛyɛ papa foforɔ bi a mfasoɔ wɔ so ma adwuma no a wɔde bɛtu mmirika wɔ adwumayɛ mu no di dwuma. Hyɛ no nsow sɛ wɔmfa saa optimizations yi nni dwuma wɔ Webpack nhwɛso adwuma no so na ɛyɛ wo na wode bedi dwuma.

CSS a wɔreyi afi mu

Nea style-loaderyɛahyehyɛ wɔ atifi hɔ no ma ɛyɛ mmerɛw sɛ wobɛma CSS akɔ bundle no mu sɛnea ɛbɛyɛ a nsa a wode bɛfa CSS fael bi ahyɛ mu dist/index.htmlno ho renhia. Ebia saa kwan yi rentumi nyɛ adwuma wɔ Content Security Policy a ɛyɛ katee mu, nanso, na ebetumi abɛyɛ bottleneck wɔ wo application no mu esiane bundle kɛse no kɛse nti.

Sɛ wopɛ sɛ woyi CSS no mu sɛnea ɛbɛyɛ a yebetumi de ahyɛ mu tẽẽ afi dist/index.html, fa mini-css-extract-loaderWebpack plugin no di dwuma.

Nea edi kan no, fa plugin no hyɛ wo kɔmputa so:

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

Afei yɛ nhwɛso na fa plugin no di dwuma wɔ Webpack nhyehyɛe no mu:

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

Sɛ wosan tu mmirika wie a npm run build, fael foforo bɛba dist/main.css, a CSS a ɛde aba no nyinaa bɛba src/js/main.js. Sɛ wohwɛ dist/index.htmlwɔ wo browser no mu mprempren a, ɔkwan a wɔfa so yɛ no bɛyera, sɛnea ɛte mprempren wɔ dist/main.css. Wubetumi de CSS a wɔayɛ no aka ho wɔ dist/index.htmleyi mu:

--- 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 fael ahorow a wɔreyi afi mu

Bootstrap no CSS no de nsɛm pii a ɛfa SVG fael ahorow ho denam inline data:URI ahorow so ka ho. Sɛ wokyerɛkyerɛ Content Security Policy mu ma wo project a esiw data:URIs ma mfonini ahorow a, ɛnde saa SVG fael ahorow yi renhyɛ. Wubetumi adi ɔhaw yi ho dwuma denam inline SVG fael ahorow a wobɛyi afi mu denam Webpack agyapade module ahorow afã no so.

Hyehyɛ Webpack ma ɛyi inline SVG fael ahorow te sɛ eyi:

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

Sɛ wosan tu mmirika wie a npm run build, wubehu SVG fael ahorow a wɔayi afi CSS mu dist/iconsna wɔatwe adwene asi so yiye afi CSS mu.

Woahu biribi a ɛnteɛ anaasɛ ne bere atwam wɔ ha? Yɛsrɛ wo bue asɛm bi wɔ GitHub . Wo hia mmoa wɔ ɔhaw ahorow a wobedi ho dwuma ho? Hwehwɛ anaa fi ase nkɔmmɔbɔ wɔ GitHub.