ബൂട്ട്‌സ്‌ട്രാപ്പും വെബ്‌പാക്കും

വെബ്‌പാക്ക് ഉപയോഗിച്ച് നിങ്ങളുടെ പ്രോജക്‌റ്റിൽ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS ഉം JavaScript ഉം എങ്ങനെ ഉൾപ്പെടുത്താമെന്നും ബണ്ടിൽ ചെയ്യാമെന്നും ഉള്ള ഔദ്യോഗിക ഗൈഡ്.

ഈ പേജിൽ

അവസാനം വരെ പോകണോ? ഈ ഗൈഡിനായി സോഴ്‌സ് കോഡും വർക്കിംഗ് ഡെമോയും twbs/examples repository- ൽ നിന്ന് ഡൗൺലോഡ് ചെയ്യുക . തത്സമയ എഡിറ്റിംഗിനായി നിങ്ങൾക്ക് StackBlitz-ൽ ഉദാഹരണം തുറക്കാനും കഴിയും .

സജ്ജമാക്കുക

ഞങ്ങൾ ആദ്യം മുതൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ച് ഒരു വെബ്‌പാക്ക് പ്രോജക്റ്റ് നിർമ്മിക്കുകയാണ്, അതിനാൽ ഞങ്ങൾക്ക് ശരിക്കും ആരംഭിക്കുന്നതിന് മുമ്പ് ചില മുൻവ്യവസ്ഥകളും മുൻ ഘട്ടങ്ങളുമുണ്ട്. ഈ ഗൈഡിന് നിങ്ങൾ Node.js ഇൻസ്റ്റാൾ ചെയ്യുകയും ടെർമിനലുമായി കുറച്ച് പരിചയം ഉണ്ടായിരിക്കുകയും വേണം.

ഒരു പ്രോജക്റ്റ് ഫോൾഡർ സൃഷ്ടിച്ച് npm സജ്ജീകരിക്കുക. എല്ലാ സംവേദനാത്മക ചോദ്യങ്ങളും ഞങ്ങളോട് ചോദിക്കുന്നത് ഒഴിവാക്കാൻ ഞങ്ങൾ my-projectഫോൾഡർ സൃഷ്‌ടിക്കുകയും ആർഗ്യുമെന്റ് ഉപയോഗിച്ച് npm ആരംഭിക്കുകയും ചെയ്യും.-y
```
mkdir my-project && cd my-project
npm init -y
```
Webpack ഇൻസ്റ്റാൾ ചെയ്യുക. അടുത്തതായി നമുക്ക് വെബ്‌പാക്ക് ഡെവലപ്‌മെന്റ് ഡിപൻഡൻസികൾ ഇൻസ്റ്റാൾ ചെയ്യേണ്ടതുണ്ട്: webpackവെബ്‌പാക്കിന്റെ കാമ്പിനായി, webpack-cliഅതിനാൽ നമുക്ക് ടെർമിനലിൽ നിന്ന് വെബ്‌പാക്ക് കമാൻഡുകൾ പ്രവർത്തിപ്പിക്കാൻ കഴിയും, webpack-dev-serverഅതിനാൽ നമുക്ക് ഒരു പ്രാദേശിക വികസന സെർവർ പ്രവർത്തിപ്പിക്കാം. --save-devഈ ആശ്രിതത്വങ്ങൾ വികസനത്തിന് മാത്രമുള്ളതാണെന്നും ഉൽപ്പാദനത്തിനുള്ളതല്ലെന്നും ഞങ്ങൾ സൂചിപ്പിക്കാൻ ഉപയോഗിക്കുന്നു .
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
ബൂട്ട്സ്ട്രാപ്പ് ഇൻസ്റ്റാൾ ചെയ്യുക. ഇപ്പോൾ നമുക്ക് ബൂട്ട്സ്ട്രാപ്പ് ഇൻസ്റ്റാൾ ചെയ്യാം. ഞങ്ങളുടെ ഡ്രോപ്പ്‌ഡൗണുകളും പോപോവറുകളും ടൂൾടിപ്പുകളും അവയുടെ സ്ഥാനനിർണ്ണയത്തിനായി അതിനെ ആശ്രയിച്ചിരിക്കുന്നതിനാൽ ഞങ്ങൾ പോപ്പറും ഇൻസ്റ്റാൾ ചെയ്യും. ആ ഘടകങ്ങൾ ഉപയോഗിക്കാൻ നിങ്ങൾ ഉദ്ദേശിക്കുന്നില്ലെങ്കിൽ, നിങ്ങൾക്ക് പോപ്പർ ഇവിടെ ഒഴിവാക്കാം.
```
npm i --save bootstrap @popperjs/core
```
അധിക ഡിപൻഡൻസികൾ ഇൻസ്റ്റാൾ ചെയ്യുക. Webpack, Bootstrap എന്നിവയ്‌ക്ക് പുറമേ, Webpack-നൊപ്പം ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS, JS എന്നിവ ശരിയായി ഇറക്കുമതി ചെയ്യാനും ബണ്ടിൽ ചെയ്യാനും ഞങ്ങൾക്ക് കുറച്ച് ഡിപൻഡൻസികൾ കൂടി ആവശ്യമാണ്. ഇതിൽ സാസ്, ചില ലോഡറുകൾ, ഓട്ടോപ്രിഫിക്സർ എന്നിവ ഉൾപ്പെടുന്നു.
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

ഇപ്പോൾ ആവശ്യമായ എല്ലാ ഡിപൻഡൻസികളും ഇൻസ്റ്റാൾ ചെയ്തിട്ടുണ്ട്, പ്രോജക്റ്റ് ഫയലുകൾ സൃഷ്ടിക്കുന്നതിനും ബൂട്ട്സ്ട്രാപ്പ് ഇറക്കുമതി ചെയ്യുന്നതിനും നമുക്ക് പ്രവർത്തിക്കാം.

പദ്ധതിയുടെ ഘടന

ഞങ്ങൾ ഇതിനകം തന്നെ 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നിങ്ങളുടെ എഡിറ്ററിൽ തുറക്കുക . ഇത് ശൂന്യമായതിനാൽ, അതിൽ കുറച്ച് ബോയിലർ പ്ലേറ്റ് കോൺഫിഗറേഷൻ ചേർക്കേണ്ടതുണ്ട്, അങ്ങനെ ഞങ്ങൾക്ക് ഞങ്ങളുടെ സെർവർ ആരംഭിക്കാനാകും. കോൺഫിഗറേഷന്റെ ഈ ഭാഗം വെബ്‌പാക്കിനോട് ഞങ്ങളുടെ പ്രോജക്റ്റിന്റെ JavaScript തിരയണമെന്നും ( 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 പേജ് Webpack ബണ്ടിൽ ചെയ്ത CSS ഉം JS ഉം ഉപയോഗപ്പെടുത്താൻ ബ്രൗസറിൽ ലോഡ് ചെയ്യുന്നതാണ്, പിന്നീടുള്ള ഘട്ടങ്ങളിൽ ഞങ്ങൾ ഇതിലേക്ക് ചേർക്കും. outputഅത് ചെയ്യുന്നതിന് മുമ്പ്, മുമ്പത്തെ ഘട്ടത്തിൽ നിന്ന് JS റെൻഡർ ചെയ്യാനും ഉൾപ്പെടുത്താനും ഞങ്ങൾ എന്തെങ്കിലും നൽകണം .
```
<!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>
```
Webpack മുഖേന ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS ലോഡുചെയ്യുമ്പോൾ ഞങ്ങൾ കാണുന്നതിനായി ഞങ്ങൾ div class="container"ഇവിടെ കുറച്ച് ബൂട്ട്‌സ്‌ട്രാപ്പ് സ്‌റ്റൈലിംഗ് ഉൾപ്പെടുത്തുന്നു.<button>
Webpack പ്രവർത്തിപ്പിക്കുന്നതിന് ഇപ്പോൾ നമുക്ക് ഒരു npm സ്ക്രിപ്റ്റ് ആവശ്യമാണ്. താഴെ കാണിച്ചിരിക്കുന്ന സ്ക്രിപ്റ്റ് തുറന്ന് package.jsonചേർക്കുക start(നിങ്ങൾക്ക് ഇതിനകം തന്നെ ടെസ്റ്റ് സ്ക്രിപ്റ്റ് ഉണ്ടായിരിക്കണം). ഞങ്ങളുടെ പ്രാദേശിക Webpack dev സെർവർ ആരംഭിക്കാൻ ഞങ്ങൾ ഈ സ്ക്രിപ്റ്റ് ഉപയോഗിക്കും.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
അവസാനമായി, നമുക്ക് Webpack ആരംഭിക്കാം. my-projectനിങ്ങളുടെ ടെർമിനലിലെ ഫോൾഡറിൽ നിന്ന്, പുതുതായി ചേർത്ത npm സ്ക്രിപ്റ്റ് പ്രവർത്തിപ്പിക്കുക :
```
npm start
```

ഈ ഗൈഡിന്റെ അടുത്തതും അവസാനവുമായ വിഭാഗത്തിൽ, ഞങ്ങൾ വെബ്‌പാക്ക് ലോഡറുകൾ സജ്ജീകരിക്കുകയും ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ എല്ലാ CSS ഉം JavaScript ഉം ഇറക്കുമതി ചെയ്യുകയും ചെയ്യും.

ബൂട്ട്സ്ട്രാപ്പ് ഇറക്കുമതി ചെയ്യുക

വെബ്‌പാക്കിലേക്ക് ബൂട്ട്‌സ്‌ട്രാപ്പ് ഇറക്കുമതി ചെയ്യുന്നതിന് ഞങ്ങൾ ആദ്യ വിഭാഗത്തിൽ ഇൻസ്റ്റാൾ ചെയ്ത ലോഡറുകൾ ആവശ്യമാണ്. ഞങ്ങൾ അവ npm ഉപയോഗിച്ച് ഇൻസ്റ്റാൾ ചെയ്തിട്ടുണ്ട്, എന്നാൽ ഇപ്പോൾ അവ ഉപയോഗിക്കുന്നതിന് Webpack കോൺഫിഗർ ചെയ്യേണ്ടതുണ്ട്.

ൽ ലോഡറുകൾ സജ്ജമാക്കുക 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'
          }
        ]
      }
    ]
  }
}

എന്തുകൊണ്ടാണ് ഈ ലോഡറുകൾ ആവശ്യമായി വരുന്നത് എന്നതിന്റെ ഒരു റീക്യാപ്പ് ഇതാ. HTML പേജിലെ ഒരു ഘടകത്തിലേക്ക് style-loaderCSS ഇൻജക്റ്റ് ചെയ്യുന്നു, ഒപ്പം ഉപയോഗിക്കുന്നതിന് സഹായിക്കുന്നു , ഓട്ടോപ്രിഫിക്സറിന് ആവശ്യമാണ്, കൂടാതെ Sass ഉപയോഗിക്കാൻ ഞങ്ങളെ അനുവദിക്കുന്നു.<style><head>css-loader@importurl()postcss-loadersass-loader

ഇനി, നമുക്ക് ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS ഇറക്കുമതി ചെയ്യാം. src/scss/styles.scssബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ എല്ലാ സോഴ്‌സ് സാസും ഇറക്കുമതി ചെയ്യാൻ ഇനിപ്പറയുന്നവ ചേർക്കുക .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
നിങ്ങൾക്ക് വേണമെങ്കിൽ ഞങ്ങളുടെ സ്റ്റൈൽഷീറ്റുകൾ വ്യക്തിഗതമായി ഇറക്കുമതി ചെയ്യാനും കഴിയും. വിശദാംശങ്ങൾക്ക് ഞങ്ങളുടെ Sass ഇറക്കുമതി ഡോക്‌സ് വായിക്കുക .
അടുത്തതായി നമ്മൾ CSS ലോഡ് ചെയ്യുകയും ബൂട്ട്സ്ട്രാപ്പിന്റെ JavaScript ഇറക്കുമതി ചെയ്യുകയും ചെയ്യുന്നു. src/js/main.jsCSS ലോഡുചെയ്യുന്നതിനും ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ എല്ലാ JS-ഉം ഇറക്കുമതി ചെയ്യുന്നതിനും ഇനിപ്പറയുന്നവ ചേർക്കുക . ബൂട്ട്‌സ്‌ട്രാപ്പ് വഴി പോപ്പർ സ്വയമേവ ഇറക്കുമതി ചെയ്യപ്പെടും.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
ബണ്ടിൽ വലുപ്പങ്ങൾ കുറയ്ക്കുന്നതിന് ആവശ്യമായ JavaScript പ്ലഗിനുകൾ നിങ്ങൾക്ക് വ്യക്തിഗതമായി ഇറക്കുമതി ചെയ്യാവുന്നതാണ്:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പ്ലഗിനുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്നതിനെക്കുറിച്ചുള്ള കൂടുതൽ വിവരങ്ങൾക്ക് ഞങ്ങളുടെ JavaScript ഡോക്‌സ് വായിക്കുക .
നിങ്ങൾ പൂർത്തിയാക്കി! 🎉 ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഉറവിടം Sass ഉം JS ഉം പൂർണ്ണമായി ലോഡുചെയ്‌തിരിക്കുന്നതിനാൽ, നിങ്ങളുടെ പ്രാദേശിക വികസന സെർവർ ഇപ്പോൾ ഇതുപോലെയായിരിക്കണം.

ഇപ്പോൾ നിങ്ങൾ ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്ന ഏതെങ്കിലും ബൂട്ട്‌സ്‌ട്രാപ്പ് ഘടകങ്ങൾ ചേർക്കാൻ തുടങ്ങാം. നിങ്ങൾക്ക് ആവശ്യമായ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS-ന്റെയും JS-ന്റെയും ഭാഗങ്ങൾ മാത്രം ഇറക്കുമതി ചെയ്‌ത് കൂടുതൽ ഇഷ്‌ടാനുസൃത സാസ് എങ്ങനെ ഉൾപ്പെടുത്താമെന്നും നിങ്ങളുടെ ബിൽഡ് ഒപ്റ്റിമൈസ് ചെയ്യാമെന്നും പൂർണ്ണമായ വെബ്‌പാക്ക് ഉദാഹരണ പ്രോജക്റ്റ് പരിശോധിക്കുന്നത് ഉറപ്പാക്കുക .

പ്രൊഡക്ഷൻ ഒപ്റ്റിമൈസേഷനുകൾ

നിങ്ങളുടെ സജ്ജീകരണത്തെ ആശ്രയിച്ച്, പ്രൊഡക്ഷനിൽ പ്രൊജക്റ്റ് പ്രവർത്തിപ്പിക്കുന്നതിന് ഉപയോഗപ്രദമായ ചില അധിക സുരക്ഷയും സ്പീഡ് ഒപ്റ്റിമൈസേഷനുകളും നടപ്പിലാക്കാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം. വെബ്‌പാക്ക് ഉദാഹരണ പ്രോജക്‌റ്റിൽ ഈ ഒപ്റ്റിമൈസേഷനുകൾ പ്രയോഗിക്കപ്പെടുന്നില്ലെന്നും അത് നടപ്പിലാക്കേണ്ടത് നിങ്ങളാണെന്നും ശ്രദ്ധിക്കുക.

CSS എക്‌സ്‌ട്രാക്റ്റുചെയ്യുന്നു

ഞങ്ങൾ മുകളിൽ style-loaderകോൺഫിഗർ ചെയ്‌തത് സൗകര്യപ്രദമായി CSS ബണ്ടിലിലേക്ക് പുറപ്പെടുവിക്കുന്നു, അതിനാൽ ഒരു CSS ഫയൽ സ്വമേധയാ ലോഡ് dist/index.htmlചെയ്യേണ്ട ആവശ്യമില്ല. ഈ സമീപനം കർശനമായ ഉള്ളടക്ക സുരക്ഷാ നയത്തിൽ പ്രവർത്തിച്ചേക്കില്ല, എന്നിരുന്നാലും, വലിയ ബണ്ടിൽ വലുപ്പം കാരണം ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷനിൽ ഒരു തടസ്സമായി മാറിയേക്കാം.

CSS വേർതിരിക്കുന്നതിന്, നമുക്ക് അത് നേരിട്ട് ലോഡുചെയ്യാൻ കഴിയും dist/index.html, mini-css-extract-loaderWebpack പ്ലഗിൻ ഉപയോഗിക്കുക.

ആദ്യം, പ്ലഗിൻ ഇൻസ്റ്റാൾ ചെയ്യുക:

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. നിങ്ങൾക്ക് dist/index.htmlഇതുപോലെ ജനറേറ്റ് ചെയ്ത CSS ഉൾപ്പെടുത്താം:

--- 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 ഫയലുകൾ എക്‌സ്‌ട്രാക്റ്റുചെയ്യുന്നു

data:ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS-ൽ ഇൻലൈൻ URI-കൾ വഴി SVG ഫയലുകളിലേക്കുള്ള ഒന്നിലധികം റഫറൻസുകൾ ഉൾപ്പെടുന്നു . ഇമേജുകൾക്കായുള്ള URI-കൾ തടയുന്ന നിങ്ങളുടെ പ്രോജക്റ്റിനായി ഒരു ഉള്ളടക്ക സുരക്ഷാ നയം നിങ്ങൾ നിർവചിക്കുകയാണെങ്കിൽ data:, ഈ SVG ഫയലുകൾ ലോഡ് ചെയ്യില്ല. Webpack-ന്റെ അസറ്റ് മൊഡ്യൂളുകൾ ഫീച്ചർ ഉപയോഗിച്ച് ഇൻലൈൻ SVG ഫയലുകൾ എക്‌സ്‌ട്രാക്‌റ്റുചെയ്യുന്നതിലൂടെ നിങ്ങൾക്ക് ഈ പ്രശ്‌നം പരിഹരിക്കാനാകും.

ഇതുപോലുള്ള ഇൻലൈൻ 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/iconsCSS-ൽ നിന്ന് ശരിയായി പരാമർശിച്ചതും കണ്ടെത്തും.

ഇവിടെ എന്തെങ്കിലും തെറ്റോ കാലഹരണപ്പെട്ടതോ കണ്ടോ? ദയവായി GitHub-ൽ ഒരു പ്രശ്നം തുറക്കുക . പ്രശ്‌നപരിഹാരത്തിന് സഹായം ആവശ്യമുണ്ടോ? GitHub-ൽ തിരയുക അല്ലെങ്കിൽ ചർച്ച ആരംഭിക്കുക .