Zaawansowana Konfiguracja Bootstrapa z WebPack

Jak zainstalowa膰 Bootstrap z WP w odpowiedniej kofiguracji

馃悪Wersja bundle - czyli pakietu skompilowanego Web Pack. Od pocz膮tku prosto jak naj艂atwiej.

Czym jest Bootstrap ?

Bootstrap to popularny framework CSS, kt贸ry zapewnia zestaw gotowych komponent贸w i styl贸w, u艂atwiaj膮c tworzenie responsywnych stron internetowych. Jest prosty w u偶yciu i pozwala szybko stworzy膰 estetyczny interfejs u偶ytkownika bez konieczno艣ci pisania du偶o kodu CSS od zera.

Jest szybkim i przygotowanym w wersji estetycznego Ui frameworkiem i posiada wiele postawowych funkcji Ux. Slu偶y do szybkiego prototypowania. Posiada wiele zale偶no艣ci Sass i Css JavaScript i oczywi艣cie HTML. Dodatkowo u偶ywa Popper.js i posiada zestaw w艂asnych Icon.

Czym jest Web-Pack ?

Webpack natomiast jest narz臋dziem do pakowania modu艂贸w JavaScript. Pozwala on na zarz膮dzanie zale偶no艣ciami mi臋dzy modu艂ami, a nast臋pnie kompiluje je w jeden plik lub wiele plik贸w w celu optymalizacji wydajno艣ci aplikacji. Webpack jest cz臋sto wykorzystywany wraz z npm (Node Package Manager) do zarz膮dzania zale偶no艣ciami i instalowania pakiet贸w.

Zalety rozwi膮zania z u偶yciem Bootstrapa i Webpacka obejmuj膮:

艁atwo艣膰 u偶ycia: Oba narz臋dzia s膮 stosunkowo 艂atwe w u偶yciu, dzi臋ki czemu nawet pocz膮tkuj膮cy programi艣ci mog膮 z nich korzysta膰.

Wydajno艣膰: Webpack umo偶liwia optymalizacj臋 aplikacji poprzez pakowanie modu艂贸w JavaScript i zarz膮dzanie zale偶no艣ciami, co przyczynia si臋 do szybszego 艂adowania strony.

Elastyczno艣膰: Zar贸wno Bootstrap, jak i Webpack oferuj膮 wiele opcji konfiguracyjnych, kt贸re pozwalaj膮 dostosowa膰 aplikacj臋 do indywidualnych potrzeb.

Niestety, istniej膮 r贸wnie偶 pewne wady:

Konieczno艣膰 nauki: Korzystanie z tych narz臋dzi wymaga pewnej nauki, zw艂aszcza je艣li kto艣 dopiero zaczyna swoj膮 przygod臋 z tworzeniem aplikacji webowych.

Nadmierna z艂o偶ono艣膰: W niekt贸rych przypadkach konfiguracja Webpacka mo偶e by膰 zbyt skomplikowana, zw艂aszcza dla mniejszych projekt贸w, co mo偶e prowadzi膰 do nadmiernego obci膮偶enia dla programist贸w.

Instalacja Boot i WP oraz zale偶no艣ci

馃悪Moja konfiguracja jest przyk艂adowa i wyj艣ciowo do powtarzalnych cel贸w. Jest te偶 dost臋pna na GitHub Scripterix, pod nazw膮 officialBootWepack

Poni偶ej kolejne komendy cli

npm init -y

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

npm i --save bootstrap @popperjs/core

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

mkdir {src,src/js,src/scss}

touch src/index.html src/js/main.js src/scss/styles.scss webpack.config.js

Poni偶sze polecenia skrypt贸w do uruchomienia webpack i od艣wie偶nia


npm start - wystartowanie servera

npm run watch - od艣wie偶anie

Nast臋pnie trzeba uzupe艂ni膰 pliki index.html webpack.config.js i doda膰 skrypty startuj膮ce i obserwuj膮ce do package.json

馃悪Najlepiej u偶yj git clone z repozytorium Scripterix/officialBootWebpack aby nie zasz艂a pomy艂ka. Nie zapomnij doda膰 gwiazdek do oceny repo.

Poni偶ej plik index.html

<!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 class="display-5">Hello, Bootstrap and Webpack ! !</h1>
    <p class="lead">W艂膮cz watch mode <kbd>npm run watch</kbd></p>
    <button class="btn btn-primary mt-2" id="btn">Primary button !</button>
    <p class="fs-2 mt-4 hidden" id="textContent">Toggle / DisToggle</p>
  </div>

  <script>
    const textContent = document.getElementById('textContent');
    const btn = document.getElementById('btn');


    btn.addEventListener('click', () => {
      textContent.classList.toggle('hidden');
      console.log("Webpack works...");
    });
  </script>

  <script src="./main.js"></script>
</body>

</html>
Poni偶ej plik configaracji WebPack

const path = require('path');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true,
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            // Adds CSS to the DOM by injecting a `<style>` tag
            loader: 'style-loader',
          },
          {
            // Interprets `@import` and `url()` like `import/require()` and will resolve them
            loader: 'css-loader',
          },
          {
            // Loader for webpack to process CSS with PostCSS
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [autoprefixer],
              },
            },
          },
          {
            // Loads a SASS/SCSS file and compiles it to CSS
            loader: 'sass-loader',
          },
        ],
      },
    ],
  },
};
Poni偶ej Plik package.json z poleceniami skrypt贸w

{
  "name": "officialbootwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve",
    "build": "webpack --mode production",
    "watch": "webpack --watch --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.0",
    "postcss-loader": "^7.1.0",
    "sass": "^1.60.0",
    "sass-loader": "^13.2.1",
    "style-loader": "^3.3.2",
    "webpack": "^5.76.3",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.1"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.7",
    "bootstrap": "^5.2.3"
  }
}