ބޫޓްސްޓްރެޕް އެންޑް ވެބްޕެކް

ސެޓް އަޕް

އަޅުގަނޑުމެން މި ބިނާކުރަނީ ބޫޓްސްޓްރެޕް އާއެކު ސުމެއްގައި ހުރެގެން ވެބްޕެކް ޕްރޮޖެކްޓެއް، އެހެންވީމާ އަޅުގަނޑުމެންނަށް ހަގީގަތުގައި ފެށުމުގެ ކުރިން ބައެއް ޕްރީރިކިއުޒިޓްސް އާއި އަޕް ފްރަންޓް ސްޓެޕްސް އެބަހުއްޓެވެ. މި ގައިޑްގައި ނޯޑް.ޖޭއެސް އިންސްޓޯލްކޮށްފައި ހުރުމާއި ޓާރމިނަލްއަށް ކޮންމެވެސް ވަރަކަށް އަހުލުވެރިވުން ލާޒިމްވެއެވެ.

1. ޕްރޮޖެކްޓް ފޯލްޑަރެއް އުފައްދައި npm ސެޓަޕް ކުރާށެވެ. އަޅުގަނޑުމެން my-projectފޯލްޑަރ އުފައްދައިގެން npm އިނިޝިއަލައިޒް ކުރާނީ -yއަރގިއުމެންޓާއެކު އެއީ އަޅުގަނޑުމެންނަށް ހުރިހާ އިންޓަރެކްޓިވް ސުވާލެއް ނުކުރުމަށްޓަކައެވެ.

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

2. ވެބްޕެކް އިންސްޓޯލް ކުރާށެވެ. ދެން އަޅުގަނޑުމެންނަށް ބޭނުންވަނީ އަޅުގަނޑުމެންގެ ވެބްޕެކް ޑިވެލޮޕްމަންޓް ޑިޕެންޑެންސީތައް އިންސްޓޯލް ކުރަން: webpackވެބްޕެކްގެ ކޯރ އަށް، webpack-cliއެހެންވީމާ އަޅުގަނޑުމެންނަށް ޓާރމިނަލުން ވެބްޕެކް ކޮމާންޑްތައް ހިންގޭނެ، އަދި webpack-dev-serverއެގޮތަށް އަޅުގަނޑުމެންނަށް ލޯކަލް ޑިވެލޮޕްމަންޓް ސަރވަރއެއް ހިންގޭނެ. އަޅުގަނޑުމެން ބޭނުންކުރަނީ --save-devމި ޑިޕެންޑެންސީތަކަކީ ހަމައެކަނި ތަރައްޤީގެ ބޭނުންތަކަށް ކަމަށާއި، އުފެއްދުމަށް ނޫންކަން އިޝާރާތް ކުރަން.

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

3. ބޫޓްސްޓްރެޕް އިންސްޓޯލް ކުރާށެވެ. މިހާރު އަޅުގަނޑުމެންނަށް ބޫޓްސްޓްރެޕް އިންސްޓޯލް ކުރެވޭނެ. އަދި އަޅުގަނޑުމެންގެ ޑްރޮޕްޑައުންސް، ޕޮޕޯވަރސް، އަދި ޓޫލްޓިޕްސް އެތަކެތީގެ ޕޮޒިޝަނިންގ އަށް އެއަށް ބަރޯސާވާތީ ޕޮޕަރ ވެސް އަޅުގަނޑުމެން އިންސްޓޯލް ކުރާނަމެވެ. އެ ކޮމްޕޯނެންޓްތައް ބޭނުން ކުރަން ރާވާފައި ނުވާނަމަ މިތަނުން ޕޮޕަރ ދޫކޮށްލެވިދާނެއެވެ.

   npm i --save bootstrap @popperjs/core
   

4. އިތުރު ޑިޕެންޑެންސީތައް އިންސްޓޯލްކުރުން. ވެބްޕެކް އަދި ބޫޓްސްޓްރެޕްގެ އިތުރުން، ބޫޓްސްޓްރެޕްގެ ސީއެސްއެސް އަދި ޖޭއެސް ރަނގަޅަށް އިމްޕޯޓްކޮށް ވެބްޕެކް އާއި އެކު ބަންޑްލް ކުރުމަށް އިތުރު ދެތިން ޑިޕެންޑެންސީއެއް ބޭނުންވެއެވެ. އޭގެ ތެރޭގައި ސާސް، ބައެއް ލޯޑަރސް، އަދި އޮޓޯޕްރިފިކްސަރ ހިމެނެއެވެ.

   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އަދިވެސް ފުރިފައި ނުވާތީ.

ވެބްޕެކް ކޮންފިގްރޭޓް ކުރުން

ޑިޕެންޑެންސީތައް އިންސްޓޯލްކޮށް، އަޅުގަނޑުމެންގެ ޕްރޮޖެކްޓް ފޯލްޑަރ އަޅުގަނޑުމެންނަށް ކޯޑިންގ ފެށުމަށް ތައްޔާރުވެފައި އޮތުމުން، މިހާރު އަޅުގަނޑުމެންނަށް ވެބްޕެކް ކޮންފިގްރޭޓްކޮށް އަޅުގަނޑުމެންގެ ޕްރޮޖެކްޓް ލޯކަލްކޮށް ހިންގޭނެއެވެ.

1. 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
     }
   }
   

2. ދެން އަޅުގަނޑުމެން ފުރިހަމަ ކުރަނީ އަޅުގަނޑުމެންގެ dist/index.html. މިއީ އެޗްޓީއެމްއެލް ޕޭޖް ވެބްޕެކް އިން ބްރައުޒާއަށް ލޯޑް ކޮށްގެން ބަންޑްލް ކޮށްފައިވާ ސީއެސްއެސް އާއި ޖޭއެސް ބޭނުން ކުރުމަށް ފަހުގެ ފިޔަވަޅުތަކުގައި އެއަށް އިތުރު ކުރާނަމެވެ. އެކަން ކުރުމުގެ ކުރިން އަޅުގަނޑުމެން އެއަށް ރެންޑަރ ކުރާނެ އެއްޗެއް ދީފައި outputކުރީގެ ފިޔަވަހީގެ ޖޭއެސް ހިމަނަން ޖެހެއެވެ.

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

   އަޅުގަނޑުމެން މިތަނުގައި ބޫޓްސްޓްރެޕް ސްޓައިލިންގގެ ކުޑަ ތަންކޮޅެއް ހިމަނާފައި މިވަނީ div class="container"އަދި <button>ބޫޓްސްޓްރެޕްގެ ސީއެސްއެސް ވެބްޕެކް އިން ލޯޑް ކުރާއިރު އަޅުގަނޑުމެންނަށް ފެންނާނެ ގޮތަކަށެވެ.

3. މިހާރު އަޅުގަނޑުމެންނަށް ބޭނުންވަނީ ވެބްޕެކް ހިންގުމަށް npm ސްކްރިޕްޓެކެވެ. ތިރީގައިވާ ސްކްރިޕްޓް ހުޅުވާލުމަށްފަހު package.jsonއިތުރުކުރުން (މިހާރުވެސް ޓެސްޓް ސްކްރިޕްޓް ތިބާގެ އަތުގައި ހުންނަންވާނެއެވެ). startއަޅުގަނޑުމެންގެ ލޯކަލް ވެބްޕެކް ޑެވް ސަރވަރ ސްޓާޓް ކުރުމަށް މި ސްކްރިޕްޓް ބޭނުންކުރާނަމެވެ.

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

4. އަދި އެންމެ ފަހުން އަޅުގަނޑުމެންނަށް ވެބްޕެކް ފަށައިގަނެވޭނެ. ތިބާގެ ޓާރމިނަލްގައިވާ ފޯލްޑަރ އިން my-project، އެ އަލަށް އިތުރުކުރި npm ސްކްރިޕްޓް ހިންގާށެވެ:

   npm start
   

   

މި ގައިޑްގެ ދެން އޮތް އަދި އެންމެ ފަހު ބައިގައި އަޅުގަނޑުމެން ވެބްޕެކް ލޯޑަރުތައް ސެޓްއަޕްކޮށް ބޫޓްސްޓްރެޕްގެ ހުރިހާ ސީއެސްއެސް އަދި ޖާވާސްކްރިޕްޓް އިމްޕޯޓް ކުރާނަމެވެ.

ބޫޓްސްޓްރެޕް އިމްޕޯޓް ކުރުން

ވެބްޕެކް އަށް ބޫޓްސްޓްރެޕް އިމްޕޯޓް ކުރުމަށްޓަކައި ފުރަތަމަ ބައިގައި އަޅުގަނޑުމެން އިންސްޓޯލް ކުރި ލޯޑަރުތައް ބޭނުންވެއެވެ. އަޅުގަނޑުމެން އެތަކެތި npm އިން އިންސްޓޯލް ކޮށްފިން، އެކަމަކު މިހާރު އެތަކެތި ބޭނުން ކުރުމަށް ވެބްޕެކް ކޮންފިގްރޭޓް ކުރަން ޖެހެއެވެ.

1. ގައި ލޯޑަރުތައް ސެޓްއަޕް ކުރުން 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ސީއެސްއެސް އިންޖެކްޓްކޮށް، އަދި ބޭނުންކުރުމުގައި އެހީތެރިވެދީ ، އޮޓޯޕްރިފިކްސަރަށް ބޭނުންވާ، އަދި ސާސް ބޭނުންކުރުމުގެ ފުރުސަތު ލިބިގެންދެއެވެ.<style><head>css-loader@importurl()postcss-loadersass-loader

2. މިހާރު، ބޫޓްސްޓްރެޕްގެ ސީއެސްއެސް އިމްޕޯޓް ކޮށްލަމާ ހިނގާށެވެ. src/scss/styles.scssބޫޓްސްޓްރެޕްގެ ހުރިހާ ސޯސް ސާސް އިމްޕޯޓް ކުރުމަށް ތިރީގައިވާ އަށް އިތުރު ކުރާށެވެ .

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

   އަދި ބޭނުންނަމަ އަޅުގަނޑުމެންގެ ސްޓައިލްޝީޓްތައް ވަކިވަކިން އިމްޕޯޓް ކުރެވޭނެއެވެ. ތަފްސީލު ހޯދުމަށް އަޅުގަނޑުމެންގެ ސާސް އިމްޕޯޓް ޑޮކްސް ކިޔައިލައްވާށެވެ .

3. ދެން އަޅުގަނޑުމެން ސީއެސްއެސް ލޯޑްކޮށް ބޫޓްސްޓްރެޕްގެ ޖާވާސްކްރިޕްޓް އިމްޕޯޓް ކުރަން. src/js/main.jsސީއެސްއެސް ލޯޑްކޮށް ބޫޓްސްޓްރެޕްގެ ހުރިހާ ޖޭއެސް އެއް އިމްޕޯޓް ކުރުމަށް ތިރީގައިވާ އަށް އެޑް ކުރާށެވެ . ބޫޓްސްޓްރެޕް މެދުވެރިކޮށް އޮޓޮމެޓިކުން ޕޮޕަރ އިމްޕޯޓް ކުރެވޭނެއެވެ.

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

   ބޫޓްސްޓްރެޕްގެ ޕްލަގިންސްތައް ބޭނުންކުރާނެ ގޮތުގެ އިތުރު މަޢުލޫމާތު ހޯދުމަށް އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ޑޮކްސް ކިޔައިބަލާށެވެ .

4. އަދި ތިޔަ ނިމުނީ! 🎉 ބޫޓްސްޓްރެޕްގެ ސޯސް ސާސް އަދި ޖޭއެސް ފުލް ލޯޑް ކޮށްފައި ހުރުމުން، ތިބާގެ ލޯކަލް ޑިވެލޮޕްމަންޓް ސަރވަރ މިހާރު މިގޮތަށް ހުންނަން ޖެހެއެވެ.

   

   މިހާރު ބޭނުންކުރަން ބޭނުންވާ ކޮންމެ ބޫޓްސްޓްރެޕް ކޮމްޕޮނެންޓެއް އިތުރުކުރަން ފަށައިގަނެވޭނެއެވެ. އިތުރު ކަސްޓަމް ސާސް ހިމަނައި، ބޫޓްސްޓްރެޕްގެ ސީއެސްއެސް އަދި ޖޭއެސްގެ ހަމައެކަނި ބައިތައް އިމްޕޯޓްކޮށްގެން ބިލްޑް އޮޕްޓިމައިޒް ކުރާނެ ގޮތުގެ ފުރިހަމަ ވެބްޕެކް މިސާލު ޕްރޮޖެކްޓް ޔަގީންކޮށް ބައްލަވާށެވެ .

ޕްރޮޑަކްޝަން އޮޕްޓިމައިޒޭޝަންސް

ތިބާގެ ސެޓަޕްއަށް ބަލާއިރު، ޕްރޮޑަކްޝަންގައި ޕްރޮޖެކްޓް ހިންގުމަށް ބޭނުންތެރި ބައެއް އިތުރު ސެކިއުރިޓީ އަދި ސްޕީޑް އޮޕްޓިމައިޒޭޝަންތައް ތަންފީޒު ކުރަން ބޭނުންވެދާނެއެވެ. މި އޮޕްޓިމައިޒޭޝަންތައް ވެބްޕެކް މިސާލު ޕްރޮޖެކްޓްގައި އަމަލު ނުކުރާކަން ފާހަގަކޮށް، ތަންފީޒު ކުރުމަކީ ތިބާގެ ކަމެކެވެ.

ސީއެސްއެސް ނެގުން

މަތީގައި style-loaderއަޅުގަނޑުމެން ކޮންފިގްރޭޓް ކުރި ގޮތަށް ފަސޭހައިން ބަންޑަލްއަށް ސީއެސްއެސް ދޫކުރާ ގޮތަށް މެނުއަލްކޮށް ސީއެސްއެސް ފައިލް ލޯޑް dist/index.htmlކުރުމަކީ ކޮންމެހެން ކުރަންޖެހޭ ކަމެއް ނޫނެވެ. މި އުސޫލު ހަރުކަށި ކޮންޓެންޓް ސެކިއުރިޓީ ޕޮލިސީއަކާއެކު މަސައްކަތް ނުކުރެވިދާނެ ނަމަވެސް، ބޮޑު ބަންޑަލް ސައިޒުގެ ސަބަބުން ތިބާގެ އެޕްލިކޭޝަންގައި ފުޅިއަކަށް ވެދާނެ އެވެ.

އަޅުގަނޑުމެންނަށް ސީދާ އިން ލޯޑް ކުރެވޭނެ ގޮތަށް ސީއެސްއެސް ވަކިކުރުމަށްޓަކައި ވެބްޕެކް ޕްލަގިން 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ހުންނާނެ , އޭގައި އިން އިމްޕޯޓްކުރާ ހުރިހާ ސީއެސްއެސް އެއް ހިމެނޭނެއެވެ src/js/main.js. މިހާރު ބްރައުޒާއިން ބަލާނަމަ dist/index.html، މިހާރު ބްރައުޒާގައި ހުރި ގޮތަށް ސްޓައިލް ގެއްލިގެންދާނެއެވެ dist/main.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>

އެސްވީޖީ ފައިލްތައް ނެގުން

ބޫޓްސްޓްރެޕްގެ ސީއެސްއެސްގައި އިންލައިން ޔޫއާރުއައި މެދުވެރިކޮށް އެސްވީޖީ ފައިލްތަކަށް ގިނަ ރެފަރެންސްތަކެއް ހިމެނެ އެވެ data:. ތިބާގެ ޕްރޮޖެކްޓަށް data:ތަސްވީރުތަކަށް ޔޫއާރްއައި ބްލޮކްކުރާ ކޮންޓެންޓް ސެކިއުރިޓީ ޕޮލިސީއެއް ކަނޑައަޅާނަމަ، ދެން މި އެސްވީޖީ ފައިލްތައް ލޯޑް ނުވާނެއެވެ. މި މައްސަލައިން ސަލާމަތްވެވޭނީ ވެބްޕެކްގެ އެސެޓް މޮޑިއުލްސް ފީޗާ ބޭނުންކޮށްގެން އިންލައިން އެސްވީޖީ ފައިލްތައް އެކްސްޓްރެކްޓްކޮށްގެންނެވެ.

މިގޮތަށް އިންލައިން އެސްވީޖީ ފައިލްތައް އެކްސްޓްރެކްޓް ކުރުމަށް ވެބްޕެކް ކޮންފިގްރޭޓް ކުރާށެވެ:

--- 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އެސްވީޖީ ފައިލްތައް ފެންނާނެއެވެ .dist/icons

މިތަނުން ގޯސް ކަމެއް ނުވަތަ މުއްދަތު ހަމަނުވާ ކަމެއް ފެނޭތަ؟ ގިޓްހަބްގައި މައްސަލައެއް ހުޅުވާލައްވާށެވެ . މައްސަލަ ހައްލުކުރުމަށް އެހީތެރިކަން ބޭނުންވޭތޯ؟ ގިޓްހަބްގައި ހޯދުން ނުވަތަ މަޝްވަރާއެއް ފެށުން .