ବୁଟଷ୍ଟ୍ରାପ୍ ଏବଂ ୱେବପ୍ୟାକ୍ |

ୱେବପ୍ୟାକ୍ ବ୍ୟବହାର କରି ବୁଟଷ୍ଟ୍ରାପ୍ ର CSS ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟକୁ କିପରି ଅନ୍ତର୍ଭୂକ୍ତ ଏବଂ ବଣ୍ଡଲ୍ କରିବେ ସେଥିପାଇଁ ଅଫିସିଆଲ୍ ଗାଇଡ୍ |

ଏହି ପୃଷ୍ଠାରେ |

ଶେଷକୁ ଯିବାକୁ ଚାହୁଁଛନ୍ତି କି? Twbs / ଉଦାହରଣ ସଂଗ୍ରହାଳୟରୁ ଏହି ଗାଇଡ୍ ପାଇଁ ଉତ୍ସ କୋଡ୍ ଏବଂ ୱାର୍କିଂ ଡେମୋ ଡାଉନଲୋଡ୍ କରନ୍ତୁ | ଲାଇଭ୍ ଏଡିଟିଂ ପାଇଁ ଆପଣ ଷ୍ଟାକବ୍ଲିଜ୍ ରେ ଉଦାହରଣ ମଧ୍ୟ ଖୋଲିପାରିବେ |

ସେଟଅପ୍ |

ଆମେ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସହିତ ଆରମ୍ଭରୁ ଏକ ୱେବପ୍ୟାକ୍ ପ୍ରୋଜେକ୍ଟ ନିର୍ମାଣ କରୁଛୁ, ତେଣୁ ପ୍ରକୃତରେ ଆରମ୍ଭ ହେବା ପୂର୍ବରୁ ସେଠାରେ କିଛି ପୂର୍ବ ସର୍ତ୍ତ ଏବଂ ଉପର ପଦକ୍ଷେପ ଅଛି | ଏହି ଗାଇଡ୍ ଆପଣଙ୍କୁ 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
```
ବୁଟଷ୍ଟ୍ରାପ୍ ସଂସ୍ଥାପନ କରନ୍ତୁ | ବର୍ତ୍ତମାନ ଆମେ ବୁଟଷ୍ଟ୍ରାପ୍ ସଂସ୍ଥାପନ କରିପାରିବା | ଆମର ଡ୍ରପଡାଉନ୍, ପପୋଭର, ଏବଂ ଟୁଲ୍ ଟିପ୍ସ ସେମାନଙ୍କ ପୋଜିସନ୍ ପାଇଁ ଏହା ଉପରେ ନିର୍ଭର କରୁଥିବାରୁ ଆମେ ପପର୍ ମଧ୍ୟ ସଂସ୍ଥାପନ କରିବୁ | ଯଦି ଆପଣ ସେହି ଉପାଦାନଗୁଡିକ ବ୍ୟବହାର କରିବାକୁ ଯୋଜନା କରୁନାହାଁନ୍ତି, ତେବେ ଆପଣ ଏଠାରେ ପପର୍ ଛାଡି ପାରିବେ |
```
npm i --save bootstrap @popperjs/core
```
ଅତିରିକ୍ତ ନିର୍ଭରଶୀଳତା ସଂସ୍ଥାପନ କରନ୍ତୁ | ୱେବପ୍ୟାକ୍ ଏବଂ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସହିତ, ବୁଟ୍ଷ୍ଟ୍ରାପ୍ ର 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ତୁମର ଏଡିଟର୍ ରେ ଖୋଲ | ଯେହେତୁ ଏହା ଖାଲି ଅଛି, ଆମକୁ ଏଥିରେ କିଛି ବଏଲେପ୍ଲେଟ୍ ବିନ୍ୟାସ ଯୋଡିବାକୁ ପଡିବ ଯାହା ଦ୍ we ାରା ଆମେ ଆମର ସର୍ଭର ଆରମ୍ଭ କରିପାରିବା | କନଫିଗ୍ ର ଏହି ଅଂଶ ୱେବପ୍ୟାକ୍ କୁ କହିଥାଏ ଯେ ଆମର ପ୍ରୋଜେକ୍ଟର ଜାଭାସ୍କ୍ରିପ୍ଟ ଖୋଜିବା, କେଉଁଠାରେ ସଙ୍କଳିତ କୋଡ୍ ( dist) କୁ ଆଉଟପୁଟ୍ କରିବା, ଏବଂ ବିକାଶ ସର୍ଭର କିପରି ବ୍ୟବହାର କରିବା ଉଚିତ ( distଗରମ ପୁନ o ଲୋଡ୍ ସହିତ ଫୋଲ୍ଡରରୁ ଟାଣିବା) |
```
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 କୁ ବ୍ୟବହାର କରିବା ପାଇଁ ଲୋଡ୍ କରିବ ଯାହାକୁ ଆମେ ପରବର୍ତ୍ତୀ ପର୍ଯ୍ୟାୟରେ ଯୋଡିବୁ | 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>
```
ଆମେ ଏଠାରେ ଟିକେ ବୁଟଷ୍ଟ୍ରାପ୍ ଷ୍ଟାଇଲିଂ ଅନ୍ତର୍ଭୂକ୍ତ କରୁଛୁ div class="container"ଏବଂ <button>ଯାହାଫଳରେ ଯେତେବେଳେ ବୁଟଷ୍ଟ୍ରାପ୍ ର CSS ୱେବ୍ ପ୍ୟାକ୍ ଦ୍ୱାରା ଲୋଡ୍ ହୁଏ ଆମେ ଦେଖିବା |
ୱେବପ୍ୟାକ୍ ଚଲାଇବା ପାଇଁ ବର୍ତ୍ତମାନ ଆମକୁ ଏକ npm ସ୍କ୍ରିପ୍ଟ ଦରକାର | ନିମ୍ନରେ ଦେଖାଯାଇଥିବା ସ୍କ୍ରିପ୍ଟ ଖୋଲନ୍ତୁ package.jsonଏବଂ ଯୋଡନ୍ତୁ start(ଆପଣଙ୍କର ପୂର୍ବରୁ ପରୀକ୍ଷା ସ୍କ୍ରିପ୍ଟ ରହିବା ଉଚିତ) | ଆମର ସ୍ଥାନୀୟ ୱେବପ୍ୟାକ୍ dev ସର୍ଭର ଆରମ୍ଭ କରିବା ପାଇଁ ଆମେ ଏହି ସ୍କ୍ରିପ୍ଟ ବ୍ୟବହାର କରିବୁ |
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
ଏବଂ ଶେଷରେ, ଆମେ ୱେବପ୍ୟାକ୍ ଆରମ୍ଭ କରିପାରିବା | ତୁମର ଟର୍ମିନାଲରେ ଥିବା my-projectଫୋଲ୍ଡରରୁ, ସେହି ନୂତନ ଭାବରେ ଯୋଗ କରାଯାଇଥିବା npm ସ୍କ୍ରିପ୍ଟକୁ ଚଲାନ୍ତୁ:
```
npm start
```

ଏହି ଗାଇଡ୍ ର ପରବର୍ତ୍ତୀ ଏବଂ ଅନ୍ତିମ ବିଭାଗରେ, ଆମେ ୱେବପ୍ୟାକ୍ ଲୋଡର୍ ସେଟ୍ ଅପ୍ କରିବୁ ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍ ର ସମସ୍ତ CSS ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟ ଆମଦାନୀ କରିବୁ |

ବୁଟଷ୍ଟ୍ରାପ୍ ଆମଦାନୀ କରନ୍ତୁ |

ୱେବପ୍ୟାକ୍ରେ ବୁଟଷ୍ଟ୍ରାପ୍ ଆମଦାନୀ କରିବା ପାଇଁ ଆମେ ପ୍ରଥମ ବିଭାଗରେ ସଂସ୍ଥାପିତ ଲୋଡର୍ ଆବଶ୍ୟକ କରେ | ଆମେ ସେଗୁଡ଼ିକୁ 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'
          }
        ]
      }
    ]
  }
}

ଆମେ କାହିଁକି ଏହି ସମସ୍ତ ଲୋଡର୍ ଆବଶ୍ୟକ କରୁ, ଏହାର ଏକ ପୁନ ap ପ୍ରତିକ୍ରିୟା | style-loaderCSS କୁ HTML ପୃଷ୍ଠାର ଏକ <style>ଉପାଦାନରେ ଇଞ୍ଜେକ୍ସନ୍ କରେ, ବ୍ୟବହାର କରିବାରେ ସାହାଯ୍ୟ କରେ ଏବଂ ଅଟୋଫ୍ରେଫିକ୍ସର୍ ପାଇଁ ଆବଶ୍ୟକ, ଏବଂ ଆମକୁ ସାସ୍ ବ୍ୟବହାର କରିବାକୁ ଅନୁମତି ଦିଏ |<head>css-loader@importurl()postcss-loadersass-loader

ବର୍ତ୍ତମାନ, ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର CSS ଆମଦାନି କରିବା | src/scss/styles.scssସମସ୍ତ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉତ୍ସ ସାସ୍ ଆମଦାନୀ କରିବାକୁ ନିମ୍ନକୁ ଯୋଡନ୍ତୁ |
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
ଆପଣ ଚାହିଁଲେ ଆପଣ ବ୍ୟକ୍ତିଗତ ଭାବରେ ଆମର ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ଆମଦାନି କରିପାରିବେ | ବିବରଣୀ ପାଇଁ ଆମର ସାସ୍ ଆମଦାନୀ ଡକସ୍ ପ Read ନ୍ତୁ |
ପରବର୍ତ୍ତୀ ସମୟରେ ଆମେ CSS ଲୋଡ୍ କରି ବୁଟଷ୍ଟ୍ରାପ୍ ର ଜାଭାସ୍କ୍ରିପ୍ଟ ଆମଦାନୀ କରୁ | src/js/main.jsCSS ଲୋଡ୍ କରିବାକୁ ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍ ର ସମସ୍ତ 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'
```
ବୁଟଷ୍ଟ୍ରାପ୍ ର ପ୍ଲଗଇନ୍ କିପରି ବ୍ୟବହାର କରାଯିବ ସେ ସମ୍ବନ୍ଧରେ ଅଧିକ ସୂଚନା ପାଇଁ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ଡକସ୍ ପ Read ନ୍ତୁ |
ଏବଂ ତୁମେ ସମାପ୍ତ! Bo ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉତ୍ସ ସାସ୍ ଏବଂ JS ସଂପୂର୍ଣ୍ଣ ଲୋଡ୍ ହେବା ସହିତ, ଆପଣଙ୍କର ସ୍ଥାନୀୟ ବିକାଶ ସର୍ଭର ବର୍ତ୍ତମାନ ଏହିପରି ଦେଖାଯିବା ଉଚିତ |

ବର୍ତ୍ତମାନ ଆପଣ ବ୍ୟବହାର କରିବାକୁ ଚାହୁଁଥିବା ଯେକ any ଣସି ବୁଟଷ୍ଟ୍ରାପ୍ ଉପାଦାନ ଯୋଗ କରିବା ଆରମ୍ଭ କରିପାରିବେ | ଅତିରିକ୍ତ କଷ୍ଟମ୍ ସାସ୍ କିପରି ଅନ୍ତର୍ଭୂକ୍ତ କରାଯିବ ଏବଂ କେବଳ ବୁଟଷ୍ଟ୍ରାପ୍ ର CSS ଏବଂ JS ର ଅଂଶ ଆମଦାନୀ କରି ତୁମର ବିଲ୍ଡକୁ ଅପ୍ଟିମାଇଜ୍ କରିବା ପାଇଁ ସମ୍ପୂର୍ଣ୍ଣ ୱେବପ୍ୟାକ୍ ଉଦାହରଣ ପ୍ରୋଜେକ୍ଟ ଯାଞ୍ଚ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅ |

ଉତ୍ପାଦନ ଅପ୍ଟିମାଇଜେସନ୍ |

ଆପଣଙ୍କର ସେଟଅପ୍ ଉପରେ ନିର୍ଭର କରି, ଆପଣ ଉତ୍ପାଦନରେ ପ୍ରକଳ୍ପ ଚଳାଇବା ପାଇଁ ଉପଯୋଗୀ କିଛି ଅତିରିକ୍ତ ସୁରକ୍ଷା ଏବଂ ସ୍ପିଡ୍ ଅପ୍ଟିମାଇଜେସନ୍ କାର୍ଯ୍ୟକାରୀ କରିବାକୁ ଚାହିଁପାରନ୍ତି | ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଏହି ଅପ୍ଟିମାଇଜେସନ୍ ୱେବପ୍ୟାକ୍ ଉଦାହରଣ ପ୍ରୋଜେକ୍ଟରେ ପ୍ରୟୋଗ କରାଯାଏ ନାହିଁ ଏବଂ ଏହାକୁ କାର୍ଯ୍ୟକାରୀ କରିବା ଆପଣଙ୍କ ଉପରେ ନିର୍ଭର କରେ |

CSS ବାହାର କରିବା |

ଆମେ ଉପରୋକ୍ତ style-loaderବିନ୍ୟାସିତ ଭାବରେ ସୁବିଧାଜନକ ଭାବରେ CSS କୁ ବଣ୍ଡଲରେ ନିର୍ଗତ କରେ ଯାହା ଦ୍ man ାରା ମାନୁଆଲ ଭାବରେ ଏକ CSS ଫାଇଲ୍ ଲୋଡ୍ କରିବା dist/index.htmlଜରୁରୀ ନୁହେଁ | ଏହି ପଦ୍ଧତି ଏକ କଠୋର ବିଷୟବସ୍ତୁ ସୁରକ୍ଷା ନୀତି ସହିତ କାମ କରିନପାରେ, ତଥାପି, ଏବଂ ବଡ ବଣ୍ଡଲ୍ ଆକାର ହେତୁ ଏହା ଆପଣଙ୍କ ଅନୁପ୍ରୟୋଗରେ ଏକ ବାଧା ହୋଇପାରେ |

CSS କୁ ଅଲଗା କରିବା ପାଇଁ ଯାହା ଦ୍ we ାରା ଆମେ ଏହାକୁ ସିଧାସଳଖ ଲୋଡ୍ କରିପାରିବା , ୱେବପ୍ୟାକ୍ ପ୍ଲଗଇନ୍ 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ବର୍ତ୍ତମାନ ଆପଣଙ୍କର ବ୍ରାଉଜର୍ ରେ ଦେଖନ୍ତି, ଶ style ଳୀଟି ବର୍ତ୍ତମାନ ପରି ଅନୁପସ୍ଥିତ ରହିବ 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 ଫାଇଲଗୁଡିକ ବାହାର କରିବା |

data:ବୁଟଷ୍ଟ୍ରାପର CSS ଇନଲାଇନ URI ମାଧ୍ୟମରେ SVG ଫାଇଲଗୁଡ଼ିକର ଏକାଧିକ ରେଫରେନ୍ସ ଅନ୍ତର୍ଭୂକ୍ତ କରେ | ଯଦି ତୁମେ ତୁମର ପ୍ରୋଜେକ୍ଟ ପାଇଁ ଏକ ବିଷୟବସ୍ତୁ ସୁରକ୍ଷା ନୀତି ବ୍ୟାଖ୍ୟା କର ଯାହା data:ପ୍ରତିଛବି ପାଇଁ URI କୁ ଅବରୋଧ କରେ, ତେବେ ଏହି SVG ଫାଇଲଗୁଡ଼ିକ ଲୋଡ୍ ହେବ ନାହିଁ | ୱେବପ୍ୟାକ୍ ର ଆସେଟ୍ ମଡ୍ୟୁଲ୍ ବ feature ଶିଷ୍ଟ୍ୟ ବ୍ୟବହାର କରି ଇନଲାଇନ୍ 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, ଆପଣ dist/iconsCSS ରୁ ବାହାର କରାଯାଇଥିବା ଏବଂ ସଠିକ୍ ଭାବରେ ରେଫରେନ୍ସ ହୋଇଥିବା SVG ଫାଇଲଗୁଡ଼ିକୁ ପାଇବେ |

ଏଠାରେ କିଛି ଭୁଲ୍ କିମ୍ବା ପୁରୁଣା ଦେଖନ୍ତୁ? ଦୟାକରି GitHub ରେ ଏକ ସମସ୍ୟା ଖୋଲନ୍ତୁ | ତ୍ରୁଟି ନିବାରଣ ପାଇଁ ସାହାଯ୍ୟ ଆବଶ୍ୟକ କରନ୍ତି କି? GitHub ରେ ସନ୍ଧାନ କିମ୍ବା ଆଲୋଚନା ଆରମ୍ଭ କର |