Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
Check
in English

Bootstrap & Wɛbpak

Di ɔfishal gayd fɔ aw fɔ inklud ɛn bɔnd Bootstrap in CSS ɛn JavaSkript insay yu prɔjek we yu de yuz Wɛbpak.

Na dis pej
Yu want fɔ skip te yu rich di ɛnd? Daunlod di sɔs kɔd ɛn wok demo fɔ dis gayd frɔm di twbs/ɛgzampul ripɔsitɔri . Yu kin opin di ɛgzampul bak na StackBlitz fɔ layv ɛditin.

Put

Wi de bil wan Webpack projɛkt wit Bootstrap frɔm skrach, so sɔm prɛrikuls dɛn de ɛn ɔp frɔnt stɛp dɛn bifo wi kin rili bigin. Dis gayd nid fɔ mek yu gɛt Node.js instɔl ɛn sɔm familiyariti wit di tɛminal.

  1. Krio wan projɛkt fɔlda ɛn sɛtup npm. Wi go mek di my-projectfɔlda ɛn initialize npm wit di -yargumɛnt fɔ mek i nɔ aks wi ɔl di intaraktiv kwɛstyɔn dɛn.

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

  2. Instɔl Wɛbpak. Neks wi nid fɔ instɔl wi Wɛbpak divɛlɔpmɛnt dipɛnshɔn dɛn: webpackfɔ di kɔr fɔ Wɛbpak, webpack-cliso dat wi go ebul fɔ rɔn Wɛbpak kɔmand dɛn frɔm di tɛminal, ɛn webpack-dev-serverso wi go ebul fɔ rɔn wan lokal divɛlɔpmɛnt sava. Wi de yuz --save-devfɔ signal se dɛn dipɛnsin ya na fɔ divɛlɔpmɛnt yus nɔmɔ ɛn nɔto fɔ prodakshɔn.

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

  3. Instɔl di Bootstrap. Naw wi kin instɔl Bootstrap. Wi go instɔl Popper bak bikɔs wi drɔpdɔwn, popovers, ɛn tultip dɛn dipen pan am fɔ dɛn pozishɔn. If yu nɔ plan fɔ yuz dɛn kɔmpɔnɛnt dɛn de, yu kin ɔmit Popper ya.

    npm i --save bootstrap @popperjs/core

  4. Instɔl ɔda dipɛnsin dɛn. Apat frɔm Wɛbpak ɛn Bootstrap, wi nid sɔm mɔ dipɛnsin dɛn fɔ impɔtɔt ɛn bɔnd Bootstrap in CSS ɛn JS fayn fayn wan wit Wɛbpak. Dɛn tin ya na Sass, sɔm lod dɛn, ɛn Ɔtoprɛfiksa.

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

Naw we wi dɔn instɔl ɔl di dipɛnsin dɛn we wi nid, wi kin bigin fɔ wok fɔ mek di prɔjek fayl dɛn ɛn fɔ import Bootstrap.

Projekt strɔkchɔ

Wi don olredi kriet di my-projectfolda en initialize npm. Naw wi go mek wi srcɛn distfɔlda dɛn bak fɔ rawnd di prɔjek strɔkchɔ. Rɔn di tin dɛn we de dɔŋ ya frɔm my-project, ɔ mek di fɔlda ɛn fayl strɔkchɔ we de dɔŋ ya wit yu an.

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

We yu dɔn, yu kɔmplit prɔjek fɔ tan lɛk dis:

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

Na dis tɛm, ɔltin de na di rayt ples, bɔt Wɛbpak nɔ go wok bikɔs wi nɔ dɔn ful-ɔp wi webpack.config.jsyet.

Kɔnfigyut di Wɛbpak

Wit dipɛnsin dɛn we dɛn dɔn instɔl ɛn wi prɔjek fɔlda rɛdi fɔ wi fɔ stat fɔ kɔd, wi kin kɔnfigyut Wɛbpak naw ɛn rɔn wi prɔjek lokal wan.

  1. Opin webpack.config.jsinsay yu ɛditɔ. Sins i blank, wi go nid fɔ ad sɔm boilerplate kɔnfig to am so dat wi go ebul fɔ stat wi sava. Dis pat pan di kɔnfig tɛl Wɛbpak se dɛn fɔ luk fɔ wi prɔjek in JavaSkript, usay fɔ autput di kɔd we dɛn dɔn kɔmpilayt to ( dist), ɛn aw di divɛlɔpmɛnt sava fɔ biev (pul frɔm di distfɔlda wit hot rilod).

    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. Neks wi de ful-ɔp wi dist/index.html. Dis na di HTML pej we Wɛbpak go lod na di brawza fɔ yuz di CSS ɛn JS we dɛn dɔn bɔnd we wi go ad to am leta. Bifo wi du dat, wi fɔ gi am sɔntin fɔ rɛnd ɛn inklud di outputJS frɔm di fɔs step.

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

    Wi de inklud smɔl smɔl Bootstrap stayl ya wit di div class="container"ɛn <button>so dat wi go si we Bootstrap in CSS de lod bay Webpack.

  3. Naw wi nid wan npm skript fɔ rɔn Wɛbpak. Opin package.jsonɛn ad di startskript we de dɔŋ ya (yu fɔ dɔn ɔlrɛdi gɛt di tɛst skript). Wi go yuz dis skript fɔ stat wi lokal Wɛbpak dev sava.

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

  4. Ɛn fɔ dɔn, wi kin stat Wɛbpak. Frɔm di my-projectfɔlda na yu tɛminal, rɔn da nyu npm skript de we dɛn dɔn ad:

    npm start
    Webpack dev sava de rɔn

Insay di nɛks ɛn las pat na dis gayd, wi go sɛt di Wɛbpak loda dɛn ɛn import ɔl di Bootstrap in CSS ɛn JavaSkript dɛn.

Impɔt bɔt di Bootstrap

Fɔ import Bootstrap insay Webpack nid di loda dɛn we wi dɔn instɔl na di fɔs pat. Wi don instɔl dɛn wit npm, bɔt naw Wɛbpak nid fɔ kɔnfigyut fɔ yuz dɛn.

  1. Set di lod dɛn na webpack.config.js. Yu kɔnfigyushɔn fayl dɔn dɔn naw ɛn i fɔ mach di smɔl pat we de dɔŋ ya. Di wangren nyu pat we de ya na di modulepat.

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

    Na wan rikap fɔ wetin mek wi nid ɔl dɛn lod ya. style-loaderinjɛkt di CSS insay wan <style>ɛlimɛnt na di <head>ɔf di HTML pej, css-loaderɛp fɔ yuz @importɛn url(), postcss-loaderi nid fɔ Ɔtoprɛfiksa, ɛn sass-loaderalaw wi fɔ yuz Sass.

  2. Naw, lɛ wi import Bootstrap in CSS. Ad di wan dɛn we de dɔŋ ya to src/scss/styles.scssfɔ import ɔl di Bootstrap in sɔs Sass.

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

    Yu kin impɔtɔt wi staylshit dɛn bak wan bay wan if yu want. Rid wi Sass import docs fɔ di ditel dɛn.

  3. Neks wi lod di CSS ɛn import Bootstrap in JavaSkript. Ad di wan dɛn we de dɔŋ ya to src/js/main.jsfɔ lod di CSS ɛn import ɔl di Bootstrap in JS dɛn. Popper go import otomatik tru Bootstrap.

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

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

    Yu kin impɔtɔt JavaSkript plɔgin dɛn bak wan bay wan as nid de fɔ kip bɔndɛl saiz dɛn dɔŋ:

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

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

    Rid wi JavaSkript dɔks fɔ no mɔ bɔt aw fɔ yuz Bootstrap in plɔgin dɛn.

  4. Ɛn yu dɔn dɔn! 🎉 Wit Bootstrap in sos Sass en JS ful lod, yu lokal divelopment sava shud luk laik dis naw.

    Webpack dev sava we de rɔn wit Bootstrap

    Naw yu kin stat fɔ ad ɛni Bootstrap kɔmpɔnɛnt we yu want fɔ yuz. Mek shɔ se yu chɛk di kɔmplit Wɛbpak ɛgzampul projɛkt fɔ aw fɔ inklud ɔda kɔstɔm Sass ɛn ɔptimayz yu bild bay we yu import ɔl di pat dɛn na Bootstrap in CSS ɛn JS we yu nid.

Prodakshɔn ɔptimayzeshɔn dɛn

Dipen pan yu sɛtup, yu kin want fɔ impruv sɔm ɔda sikyɔriti ɛn spid ɔptimayzeshɔn dɛn we yusful fɔ rɔn di prɔjek insay prodakshɔn. Notis se dɛn ɔptimayzeshɔn ya nɔ de aplay pan di Wɛbpak ɛgzampul projɛkt ɛn na yu fɔ impruv.

We dɛn de pul CSS

Di style-loaderwi kɔnfigyut ɔp kɔvinantli ɛmit CSS insay di bɔndɛl so dat manually lod wan CSS fayl in dist/index.htmlnɔ nid. Dis we fɔ du tin nɔ go wok wit wan strikt Kɔntinɛnt Sikyuriti Polisi, bɔt, ɛn i kin bi bɔtulnɛk na yu aplikeshɔn bikɔs ɔf di big bɔndɛl saiz.

Fɔ separet di CSS so dat wi go ebul fɔ lod am dairekt frɔm dist/index.html, yuz di mini-css-extract-loaderWɛbpak plɔgin.

Fɔs, instɔl di plɔgin:

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

Dɔn, instans ɛn yuz di plɔgin na di Wɛbpak kɔnfigyushɔn:

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

Afta yu dɔn rɔn npm run buildbak, wan nyu fayl go de dist/main.css, we go gɛt ɔl di CSS we src/js/main.js. If yu wach dist/index.htmlam na yu brɔwza naw, di stayl nɔ go de, lɛk aw i de naw na dist/main.css. Yu kin inklud di CSS we dɛn dɔn jenarayz insay dist/index.htmllɛk dis:

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

Fɔ pul SVG fayl dɛn

Bootstrap in CSS inklud bɔku rɛfrɛns to SVG fayl dɛn tru inlayn data:URI dɛn. If yu difayn wan Kɔntinɛnt Sikyuriti Polisi fɔ yu prɔjek we de blok data:URI fɔ pikchɔ dɛn, den dɛn SVG fayl dɛn ya nɔ go lod. Yu kin ebul fɔ arawnd dis prɔblɛm bay we yu pul di inlayn SVG fayl dɛn yuz di Wɛbpak in ɛset mɔdyul dɛn ficha.

Kɔnfigyut Wɛbpak fɔ pul inlayn SVG fayl dɛn lɛk dis:

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

Afta yu dɔn rɔn npm run buildbak, yu go si di SVG fayl dɛn we dɛn pul insay dist/iconsɛn we dɛn rɛfrɛns dɛn fayn fayn wan frɔm CSS.

Si sɔntin we rɔng ɔ we nɔ de igen ya? Duya opin wan isyu na GitHub . Nid ɛp fɔ sɔlv prɔblɛm dɛn? Sɔch ɔ stat fɔ tɔk bɔt na GitHub.