Ana içeriğe geç Dokümanlar navigasyonuna atla
Check
in English

Önyükleme ve Web Paketi

Webpack kullanarak Bootstrap'in CSS ve JavaScript'ini projenize nasıl dahil edeceğinize ve paketleyeceğinize dair resmi kılavuz.

Bu sayfada
Sona atlamak ister misin? Bu kılavuz için kaynak kodunu ve çalışma demosunu twbs/examples deposundan indirin . Örneği canlı düzenleme için StackBlitz'de de açabilirsiniz.

Kurmak

Bootstrap ile sıfırdan bir Webpack projesi oluşturuyoruz, bu nedenle gerçekten başlayabilmemiz için bazı önkoşullar ve ön adımlar var. Bu kılavuz, Node.js'nin kurulu olmasını ve terminal hakkında biraz bilgi sahibi olmanızı gerektirir.

  1. Bir proje klasörü oluşturun ve npm'yi kurun. Klasörü oluşturacağız ve bize tüm etkileşimli soruları sormasını önlemek my-projectiçin argümanla npm'yi başlatacağız .-y

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

  2. Webpack'i yükleyin. Daha sonra Webpack geliştirme bağımlılıklarımızı kurmamız gerekiyor: webpackWebpack'in çekirdeği için, webpack-cliböylece Webpack komutlarını terminalden webpack-dev-serverçalıştırabiliriz ve böylece yerel bir geliştirme sunucusu çalıştırabiliriz. Bu --save-devbağımlılıkların yalnızca geliştirme kullanımı için olduğunu ve üretim için olmadığını belirtmek için kullanıyoruz.

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

  3. Bootstrap'i yükleyin. Artık Bootstrap'i kurabiliriz. Açılır listelerimiz, açılır pencerelerimiz ve araç ipuçlarımız, konumları için ona bağlı olduğundan, Popper'ı da kuracağız. Bu bileşenleri kullanmayı düşünmüyorsanız, burada Popper'ı atlayabilirsiniz.

    npm i --save bootstrap @popperjs/core

  4. Ek bağımlılıklar yükleyin. Webpack ve Bootstrap'a ek olarak, Bootstrap'in CSS ve JS'sini Webpack ile düzgün bir şekilde içe aktarmak ve paketlemek için birkaç bağımlılığa daha ihtiyacımız var. Bunlar arasında Sass, bazı yükleyiciler ve Autoprefixer bulunur.

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

Artık gerekli tüm bağımlılıkları yüklediğimize göre, proje dosyalarını oluşturmaya ve Bootstrap'i içe aktarmaya başlayabiliriz.

proje yapısı

Klasörü zaten oluşturduk my-projectve npm'yi başlattık. Şimdi proje yapısını tamamlamak için srcve klasörlerimizi de oluşturacağız. distAşağıdakileri 'den çalıştırın my-projectveya aşağıda gösterilen klasör ve dosya yapısını manuel olarak oluşturun.

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

İşiniz bittiğinde, projenizin tamamı şöyle görünmelidir:

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

Bu noktada, her şey doğru yerde, ancak Webpack çalışmayacak çünkü henüz doldurmadık webpack.config.js.

Web Paketini Yapılandır

Bağımlılıklar yüklendiğinde ve proje klasörümüz kodlamaya başlamamız için hazır olduğunda, artık Webpack'i yapılandırabilir ve projemizi yerel olarak çalıştırabiliriz.

  1. Editörünüzde açın webpack.config.js. Boş olduğu için, sunucumuzu başlatabilmemiz için ona bazı ortak kalıp yapılandırması eklememiz gerekecek. Yapılandırmanın bu kısmı, Webpack'e projemizin JavaScript'ini, derlenmiş kodun nereye ( dist) çıktısını alacağını ve geliştirme sunucusunun nasıl davranması gerektiğini ( disthot reload ile klasörden çekerek) araması gerektiğini söyler.

    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. Daha sonra bizim için dolduruyoruz dist/index.html. Bu, Web paketinin, daha sonraki adımlarda ekleyeceğimiz birlikte verilen CSS ve JS'yi kullanmak için tarayıcıya yükleyeceği HTML sayfasıdır. outputBunu yapmadan önce, bir önceki adımdaki JS'yi oluşturması ve dahil etmesi için ona bir şey vermeliyiz .

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

    Bootstrap'ın CSS'sinin Webpack tarafından ne zaman yüklendiğini görebilmemiz için div class="container"ve ile birlikte buraya biraz Bootstrap stili ekliyoruz.<button>

  3. Şimdi Webpack'i çalıştırmak için bir npm betiğine ihtiyacımız var. Aşağıda gösterilen komut dosyasını açın package.jsonve ekleyin start(test komut dosyasına zaten sahip olmalısınız). Yerel Webpack dev sunucumuzu başlatmak için bu betiği kullanacağız.

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

  4. Ve son olarak, Webpack'i başlatabiliriz. my-projectTerminalinizdeki klasörden yeni eklenen npm komut dosyasını çalıştırın :

    npm start
    Webpack dev sunucusu çalışıyor

Bu kılavuzun sonraki ve son bölümünde, Webpack yükleyicilerini ayarlayacağız ve tüm Bootstrap CSS ve JavaScript'lerini içe aktaracağız.

Önyüklemeyi İçe Aktar

Bootstrap'i Webpack'e içe aktarmak, ilk bölümde kurduğumuz yükleyicileri gerektirir. Bunları npm ile kurduk, ancak şimdi Webpack'in bunları kullanacak şekilde yapılandırılması gerekiyor.

  1. Yükleyicileri ayarlayın webpack.config.js. Yapılandırma dosyanız şimdi tamamlandı ve aşağıdaki kod parçasıyla eşleşmelidir. Buradaki tek yeni kısım modulebölüm.

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

    İşte tüm bu yükleyicilere neden ihtiyacımız olduğunun bir özeti. CSS'yi HTML sayfasındaki bir öğeye style-loaderenjekte eder, Autoprefixer için gerekli olan and kullanımına yardımcı olur ve Sass'ı kullanmamıza izin verir.<style><head>css-loader@importurl()postcss-loadersass-loader

  2. Şimdi Bootstrap'ın CSS'sini içe aktaralım. src/scss/styles.scssBootstrap'in tüm kaynak Sass'larını içe aktarmak için aşağıdakini ekleyin .

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

    İsterseniz stil sayfalarımızı tek tek de içe aktarabilirsiniz. Ayrıntılar için Sass içe aktarma belgelerimizi okuyun .

  3. Ardından CSS'yi yüklüyoruz ve Bootstrap'ın JavaScript'ini içe aktarıyoruz. src/js/main.jsCSS'yi yüklemek ve tüm Bootstrap JS'lerini içe aktarmak için aşağıdakileri ekleyin . Popper, Bootstrap aracılığıyla otomatik olarak içe aktarılacaktır.

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

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

    Paket boyutlarını düşük tutmak için JavaScript eklentilerini gerektiği gibi tek tek de içe aktarabilirsiniz:

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

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

    Bootstrap eklentilerinin nasıl kullanılacağı hakkında daha fazla bilgi için JavaScript belgelerimizi okuyun .

  4. Ve işin bitti! 🎉 Bootstrap'in kaynak Sass ve JS'si tamamen yüklendiğinde, yerel geliştirme sunucunuz artık böyle görünmelidir.

    Bootstrap ile çalışan Webpack dev sunucusu

    Artık kullanmak istediğiniz Bootstrap bileşenlerini eklemeye başlayabilirsiniz. Ek özel Sass'ı nasıl ekleyeceğiniz ve yapınızı yalnızca Bootstrap's CSS ve JS'nin ihtiyacınız olan kısımlarını içe aktararak nasıl optimize edeceğiniz konusunda eksiksiz Webpack örnek projesini kontrol ettiğinizden emin olun .

Üretim optimizasyonları

Kurulumunuza bağlı olarak, projeyi üretimde çalıştırmak için yararlı olan bazı ek güvenlik ve hız optimizasyonlarını uygulamak isteyebilirsiniz. Bu optimizasyonların Webpack örnek projesinde uygulanmadığını ve uygulamanın size bağlı olduğunu unutmayın.

CSS'yi Çıkarma

Yukarıda style-loaderyapılandırdığımız, CSS dosyasını manuel olarak yüklemeye gerek kalmaması için pakete uygun şekilde CSS yayar dist/index.html. Ancak bu yaklaşım, katı bir İçerik Güvenliği Politikası ile çalışmayabilir ve büyük paket boyutu nedeniyle uygulamanızda bir darboğaz haline gelebilir.

Doğrudan adresinden yükleyebilmemiz için CSS'yi ayırmak için Webpack eklentisini dist/index.htmlkullanın .mini-css-extract-loader

İlk önce eklentiyi kurun:

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

Ardından, eklentiyi Web paketi yapılandırmasında somutlaştırın ve kullanı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
           },
           {

Yeniden çalıştırdıktan sonra , tarafından içe aktarılan tüm CSS'leri içerecek npm run buildyeni bir dosya olacaktır . Şimdi tarayıcınızda görüntülerseniz , şimdi olduğu gibi stil eksik olacaktır . Oluşturulan CSS'yi şu şekilde ekleyebilirsiniz :dist/main.csssrc/js/main.jsdist/index.htmldist/main.cssdist/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 dosyalarının ayıklanması

data:Bootstrap'ın CSS'si, satır içi URI'ler aracılığıyla SVG dosyalarına birden çok referans içerir . Projeniz data:için görüntüler için URI'leri engelleyen bir İçerik Güvenliği Politikası tanımlarsanız, bu SVG dosyaları yüklenmez. Webpack'in varlık modülleri özelliğini kullanarak satır içi SVG dosyalarını ayıklayarak bu sorunu çözebilirsiniz.

Webpack'i aşağıdaki gibi satır içi SVG dosyalarını çıkaracak şekilde yapılandırın:

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

Tekrar çalıştırdıktan sonra , CSS'ye ayıklanan ve CSS'den uygun şekilde referans npm run buildverilen SVG dosyalarını bulacaksınız .dist/icons

Burada yanlış veya güncel olmayan bir şey mi gördünüz? Lütfen GitHub'da bir sorun açın . Sorun giderme konusunda yardıma mı ihtiyacınız var? GitHub'da arama yapın veya bir tartışma başlatın .