באָאָצטראַפּ & וועבפּאַק

דער באַאַמטער פירער פֿאַר ווי צו אַרייַננעמען און פּעקל Bootstrap ס CSS און דזשאַוואַסקריפּט אין דיין פּרויעקט ניצן וועבפּאַקק.

אויף דעם בלאַט

ווילן צו שפּרינגען צו די סוף? אראפקאפיע די מקור קאָד און ארבעטן דעמאָ פֿאַר דעם פירער פֿון די twbs / ביישפילן ריפּאַזאַטאָרי . איר קענט אויך עפֿענען דעם ביישפּיל אין StackBlitz פֿאַר לעבן עדיטינג.

שטעל אויף

מיר בויען אַ וועבפּאַקק פּרויעקט מיט Bootstrap פֿון קראַצן, אַזוי עס זענען עטלעכע פּרירעקוואַזאַץ און סטעפּס איידער מיר קענען טאַקע אָנהייבן. דער פירער ריקווייערז איר צו האָבן Node.js אינסטאַלירן און עטלעכע פאַמיליעראַטי מיט די וואָקזאַל.

שאַפֿן אַ פּרויעקט טעקע און סעטאַפּ npm. מיר וועלן מאַכן די my-projectטעקע און יניטיאַליזירן npm מיט די -yאַרגומענט צו ויסמיידן עס צו פרעגן אונדז אַלע ינטעראַקטיוו פֿראגן.
```
mkdir my-project && cd my-project
npm init -y
```
ינסטאַלירן וועבפּאַקק. ווייַטער מיר דאַרפֿן צו ינסטאַלירן אונדזער וועבפּאַקק אַנטוויקלונג דיפּענדאַנסיז: webpackפֿאַר די האַרץ פון וועבפּאַקק, webpack-cliאַזוי מיר קענען לויפן וועבפּאַקק קאַמאַנדז פון די וואָקזאַל, און webpack-dev-serverאַזוי מיר קענען לויפן אַ היגע אַנטוויקלונג סערווער. מיר נוצן --save-devצו סיגנאַל אַז די דיפּענדאַנסיז זענען בלויז פֿאַר אַנטוויקלונג נוצן און נישט פֿאַר פּראָדוקציע.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
ינסטאַלירן Bootstrap. איצט מיר קענען ינסטאַלירן Bootstrap. מיר וועלן אויך ינסטאַלירן פּאָפּער זינט אונדזער דראָפּדאָוונס, פּאָפּאָווערס און טאָאָלטיפּס אָפענגען אויף עס פֿאַר זייער פּאַזישאַנינג. אויב איר טאָן ניט פּלאַן צו נוצן די קאַמפּאָונאַנץ, איר קענען לאָזן פּאָפּער דאָ.
```
npm i --save bootstrap @popperjs/core
```
ינסטאַלירן נאָך דיפּענדאַנסיז. אין אַדישאַן צו וועבפּאַקק און באָאָטסטראַפּ, מיר דאַרפֿן אַ ביסל מער דיפּענדאַנסיז צו רעכט אַרייַנפיר און פּעקל Bootstrap's CSS און JS מיט וועבפּאַקק. די אַרייַננעמען Sass, עטלעכע לאָודערז און אַוטאָפּרעפיקסער.
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

איצט אַז מיר האָבן אַלע די נויטיק דיפּענדאַנסיז אינסטאַלירן, מיר קענען באַקומען צו אַרבעטן קריייטינג די פּרויעקט טעקעס און ימפּאָרטינג Bootstrap.

פּרויעקט סטרוקטור

מיר האָבן שוין באשאפן דעם my-projectטעקע און יניטיאַלייזד npm. איצט מיר וועלן אויך מאַכן אונדזער srcאון distפאָלדערס צו פאַרענדיקן די פּרויעקט סטרוקטור. לויפן די פאלגענדע פֿון my-project, אָדער מאַניואַלי מאַכן די טעקע און טעקע סטרוקטור געוויזן אונטן.

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

ווען איר פאַרטיק, דיין גאַנץ פּרויעקט זאָל קוקן ווי דאָס:

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

אין דעם פונט, אַלץ איז אין די רעכט אָרט, אָבער וועבפּאַקק וועט נישט אַרבעטן ווייַל מיר האָבן נישט אָנגעפילט אונדזער webpack.config.jsנאָך.

קאַנפיגיער וועבפּאַקק

מיט די דעפּענדאַנסיז אינסטאַלירן און אונדזער פּרויעקט טעקע גרייט פֿאַר אונדז צו אָנהייבן קאָודינג, מיר קענען איצט קאַנפיגיער וועבפּאַקק און לויפן אונדזער פּרויעקט לאָוקאַלי.

עפענען webpack.config.jsאין דיין רעדאַקטאָר. זינט עס איז ליידיק, מיר דאַרפֿן צו לייגן עטלעכע בוילערפּלאַטע קאַנפיגיעריישאַן צו עס אַזוי מיר קענען אָנהייבן אונדזער סערווער. דער טייל פון די קאָנפיג דערציילט וועבפּאַקק צו זוכן די דזשאַוואַסקריפּט פון אונדזער פּרויעקט, ווו צו אַרויספירן די קאַמפּיילד קאָד צו ( dist), און ווי די אַנטוויקלונג סערווער זאָל זיין ביכייווד (פּולינג פון דער distטעקע מיט הייס רילאָוד).
```
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
  }
}
```
ווייַטער מיר פּלאָמבירן אין אונדזער dist/index.html. דאָס איז דער HTML בלאַט וואָס וועבפּאַקק וועט לאָדן אין דעם בלעטערער צו נוצן די באַנדאַלד CSS און JS מיר וועט לייגן צו עס אין שפּעטער סטעפּס. איידער מיר קענען טאָן דאָס, מיר האָבן צו געבן עס עפּעס צו ופפירן און אַרייַננעמען די outputJS פון די פריערדיקע שריט.
```
<!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 סטילינג דאָ מיט די div class="container"און <button>אַזוי אַז מיר זען ווען Bootstrap ס CSS איז לאָודיד דורך וועבפּאַקק.
איצט מיר דאַרפֿן אַ npm שריפט צו לויפן וועבפּאַקק. עפֿן package.jsonאון לייגן דעם startשריפט געוויזן אונטן (איר זאָל שוין האָבן די פּראָבע שריפט). מיר וועלן נוצן דעם שריפט צו אָנהייבן אונדזער היגע וועבפּאַקק דעוו סערווער.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
און לעסאָף, מיר קענען אָנהייבן וועבפּאַקק. פֿון דער my-projectטעקע אין דיין וואָקזאַל, לויפן דעם ניי צוגעלייגט npm שריפט:
```
npm start
```

אין דער ווייַטער און לעצט אָפּטיילונג פון דעם פירער, מיר שטעלן די וועבפּאַקק לאָודערז און אַרייַנפיר אַלע Bootstrap ס CSS און דזשאַוואַסקריפּט.

אַרייַנפיר באָאָטסטראַפּ

ימפּאָרטינג Bootstrap אין וועבפּאַקק ריקווייערז די לאָודערז וואָס מיר האָבן אינסטאַלירן אין דער ערשטער אָפּטיילונג. מיר האָבן זיי אינסטאַלירן מיט npm, אָבער איצט וועבפּאַקק דאַרף זיין קאַנפיגיערד צו נוצן זיי.

שטעלן די לאָודערז אין webpack.config.js. דיין קאַנפיגיעריישאַן טעקע איז איצט גאַנץ און זאָל גלייַכן די סניפּאַט אונטן. דער בלויז נייַע טייל דאָ איז די moduleאָפּטיילונג.

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

דאָ ס אַ רעקאַפּ פון וואָס מיר דאַרפֿן אַלע די לאָודערז. style-loaderינדזשעקץ די CSS אין אַ <style>עלעמענט אין <head>די HTML בלאַט, css-loaderהעלפּס ניצן @importאון url(), postcss-loaderאיז פארלאנגט פֿאַר אַוטאָפּרעפיקסער, און sass-loaderאַלאַוז אונדז צו נוצן Sass.

איצט, לאָזן אונדז אַרייַנפיר Bootstrap ס CSS. לייג די פאלגענדע צו src/scss/styles.scssאַרייַנפיר אַלע די באָאָטסטראַפּ ס מקור סאַס.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
איר קענט אויך אַרייַנפיר אונדזער סטילעשעעץ ינדיווידזשואַלי אויב איר ווילט. לייענען אונדזער Sass אַרייַנפיר דאָקס פֿאַר דעטאַילס.
דערנאָך מיר לאָדן די CSS און אַרייַנפיר Bootstrap ס דזשאַוואַסקריפּט. לייג די פאלגענדע צו src/js/main.jsצו מאַסע די CSS און אַרייַנפיר אַלע Bootstrap ס JS. פּאָפּער וועט זיין ימפּאָרטיד אויטאָמאַטיש דורך Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
איר קענען אויך אַרייַנפיר דזשאַוואַסקריפּט פּלוגינס ינדיווידזשואַלי ווי דארף צו האַלטן פּעקל סיזעס אַראָפּ:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
לייענען אונדזער דזשאַוואַסקריפּט דאָקס פֿאַר מער אינפֿאָרמאַציע וועגן ווי צו נוצן Bootstrap ס פּלוגינס.
און דו ביסט פארטיק! 🎉 מיט Bootstrap ס מקור Sass און JS גאָר לאָודיד, דיין היגע אַנטוויקלונג סערווער זאָל איצט קוקן ווי דאָס.

איצט איר קענען אָנהייבן אַדינג קיין Bootstrap קאַמפּאָונאַנץ איר ווילן צו נוצן. זייט זיכער צו קאָנטראָלירן די גאַנץ וועבפּאַקק ביישפּיל פּרויעקט פֿאַר ווי צו אַרייַננעמען נאָך מנהג סאַס און אַפּטאַמייז דיין בויען דורך ימפּאָרטינג בלויז די פּאַרץ פון Bootstrap ס CSS און JS וואָס איר דאַרפֿן.

פּראָדוקציע אָפּטימיזאַטיאָנס

דעפּענדינג אויף דיין סעטאַפּ, איר זאל וועלן צו ינסטרומענט עטלעכע נאָך זיכערהייט און גיכקייַט אָפּטימיזאַטיאָנס נוציק פֿאַר פליסנדיק די פּרויעקט אין פּראָדוקציע. באַמערקונג אַז די אָפּטימיזאַטיאָנס זענען נישט געווענדט אויף די וועבפּאַקק ביישפּיל פּרויעקט און עס איז אַרויף צו איר צו ינסטרומענט.

עקסטראַקטינג CSS

די style-loaderמיר קאַנפיגיערד אויבן קאַנוויניאַנטלי עמיץ CSS אין דעם פּעקל אַזוי אַז מאַניואַלי לאָודינג אַ CSS טעקע אין dist/index.htmlאיז ניט נייטיק. דער צוגאַנג קען נישט אַרבעטן מיט אַ שטרענג אינהאַלט זיכערהייט פּאָליטיק, אָבער, און עס קען ווערן אַ באַטאַלנעק אין דיין אַפּלאַקיישאַן רעכט צו דער גרויס פּעקל גרייס.

צו באַזונדער די CSS אַזוי אַז מיר קענען לאָדן עס גלייך פֿון dist/index.html, נוצן די mini-css-extract-loaderוועבפּאַקק פּלוגין.

ערשטער, ינסטאַלירן די פּלוגין:

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

דערנאָך ינסטאַנטייט און נוצן די פּלוגין אין די וועבפּאַקק קאַנפיגיעריישאַן:

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

נאָך פליסנדיק npm run buildווידער, עס וועט זיין אַ נייַע טעקע dist/main.css, וואָס וועט אַנטהאַלטן אַלע די CSS ימפּאָרטיד דורך src/js/main.js. אויב איר זען dist/index.htmlאין דיין בלעטערער איצט, דער נוסח וועט זיין פעלנדיק, ווי עס איז איצט אין dist/main.css. איר קענען אַרייַננעמען די דזשענערייטאַד CSS אין dist/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 טעקעס

Bootstrap's CSS כולל קייפל באַווייַזן צו SVG טעקעס דורך ינלינע data:URIs. אויב איר דעפינירן אַ אינהאַלט זיכערהייט פּאָליטיק פֿאַר דיין פּרויעקט וואָס בלאַקס data:URIs פֿאַר בילדער, די SVG טעקעס וועלן נישט לאָדן. איר קענען באַקומען אַרום דעם פּראָבלעם דורך יקסטראַקטינג די ינלינע SVG טעקעס מיט Webpack ס אַסעט מאַדזשולז שטריך.

קאַנפיגיער וועבפּאַקק צו עקסטראַקט ינלינע SVG טעקעס ווי דאָס:

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

נאָך פליסנדיק npm run buildווידער, איר וועט געפֿינען די SVG טעקעס יקסטראַקטיד אין dist/iconsאון רעכט רעפערענסעד פֿון CSS.

זען עפּעס פאַלש אָדער פאַרעלטערט דאָ? ביטע עפֿענען אַן אַרויסגעבן אויף GitHub . דאַרפֿן הילף טראָובלעשאָאָטינג? זוכן אָדער אָנהייבן אַ דיסקוסיע אויף GitHub.