ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
Check
in English

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮತ್ತು ವೆಬ್‌ಪ್ಯಾಕ್

ವೆಬ್‌ಪ್ಯಾಕ್ ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು ಮತ್ತು ಬಂಡಲ್ ಮಾಡುವುದು ಎಂಬುದರ ಅಧಿಕೃತ ಮಾರ್ಗದರ್ಶಿ.

ಈ ಪುಟದಲ್ಲಿ
ಕೊನೆಯವರೆಗೂ ಸ್ಕಿಪ್ ಮಾಡಲು ಬಯಸುವಿರಾ? ಈ ಮಾರ್ಗದರ್ಶಿಗಾಗಿ ಮೂಲ ಕೋಡ್ ಮತ್ತು ವರ್ಕಿಂಗ್ ಡೆಮೊವನ್ನು twbs/ಉದಾಹರಣೆಗಳ ರೆಪೊಸಿಟರಿಯಿಂದ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ . ಲೈವ್ ಸಂಪಾದನೆಗಾಗಿ ನೀವು StackBlitz ನಲ್ಲಿ ಉದಾಹರಣೆಯನ್ನು ಸಹ ತೆರೆಯಬಹುದು.

ಸೆಟಪ್

ನಾವು ಮೊದಲಿನಿಂದಲೂ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ ವೆಬ್‌ಪ್ಯಾಕ್ ಯೋಜನೆಯನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದೇವೆ, ಆದ್ದರಿಂದ ನಾವು ನಿಜವಾಗಿಯೂ ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು ಕೆಲವು ಪೂರ್ವಾಪೇಕ್ಷಿತಗಳು ಮತ್ತು ಮುಂದಿನ ಹಂತಗಳಿವೆ. ಈ ಮಾರ್ಗದರ್ಶಿಗೆ ನೀವು Node.js ಅನ್ನು ಸ್ಥಾಪಿಸಬೇಕು ಮತ್ತು ಟರ್ಮಿನಲ್‌ನೊಂದಿಗೆ ಸ್ವಲ್ಪ ಪರಿಚಿತತೆಯನ್ನು ಹೊಂದಿರಬೇಕು.

  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. ಹೆಚ್ಚುವರಿ ಅವಲಂಬನೆಗಳನ್ನು ಸ್ಥಾಪಿಸಿ. Webpack ಮತ್ತು Bootstrap ಜೊತೆಗೆ, Webpack ಜೊತೆಗೆ Bootstrap ನ 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ಮಾಡಿಲ್ಲ.

ವೆಬ್‌ಪ್ಯಾಕ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ

ಅವಲಂಬನೆಗಳನ್ನು ಸ್ಥಾಪಿಸಿ ಮತ್ತು ಕೋಡಿಂಗ್ ಪ್ರಾರಂಭಿಸಲು ನಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಫೋಲ್ಡರ್ ಸಿದ್ಧವಾಗಿದೆ, ನಾವು ಈಗ ವೆಬ್‌ಪ್ಯಾಕ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಬಹುದು ಮತ್ತು ನಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಚಲಾಯಿಸಬಹುದು.

  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. ಬಂಡಲ್ ಮಾಡಿದ CSS ಮತ್ತು JS ಅನ್ನು ಬಳಸಿಕೊಳ್ಳಲು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ವೆಬ್‌ಪ್ಯಾಕ್ ಲೋಡ್ ಆಗುವ HTML ಪುಟ ಇದಾಗಿದೆ, ನಾವು ಮುಂದಿನ ಹಂತಗಳಲ್ಲಿ ಅದಕ್ಕೆ ಸೇರಿಸುತ್ತೇವೆ. 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 ಅನ್ನು ವೆಬ್‌ಪ್ಯಾಕ್‌ನಿಂದ ಲೋಡ್ ಮಾಡಿದಾಗ ನಾವು ನೋಡುತ್ತೇವೆ.

  3. Webpack ಅನ್ನು ಚಲಾಯಿಸಲು ನಮಗೆ ಈಗ npm ಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯವಿದೆ. ಕೆಳಗೆ ತೋರಿಸಿರುವ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ತೆರೆಯಿರಿ package.jsonಮತ್ತು ಸೇರಿಸಿ start(ನೀವು ಈಗಾಗಲೇ ಪರೀಕ್ಷಾ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಹೊಂದಿರಬೇಕು). ನಮ್ಮ ಸ್ಥಳೀಯ ವೆಬ್‌ಪ್ಯಾಕ್ ದೇವ್ ಸರ್ವರ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಲು ನಾವು ಈ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ.

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

  4. ಮತ್ತು ಅಂತಿಮವಾಗಿ, ನಾವು ವೆಬ್‌ಪ್ಯಾಕ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಬಹುದು. ನಿಮ್ಮ ಟರ್ಮಿನಲ್‌ನಲ್ಲಿರುವ my-projectಫೋಲ್ಡರ್‌ನಿಂದ, ಹೊಸದಾಗಿ ಸೇರಿಸಲಾದ npm ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ರನ್ ಮಾಡಿ:

    npm start
    ವೆಬ್‌ಪ್ಯಾಕ್ ದೇವ್ ಸರ್ವರ್ ಚಾಲನೆಯಲ್ಲಿದೆ

ಈ ಮಾರ್ಗದರ್ಶಿಗೆ ಮುಂದಿನ ಮತ್ತು ಅಂತಿಮ ವಿಭಾಗದಲ್ಲಿ, ನಾವು ವೆಬ್‌ಪ್ಯಾಕ್ ಲೋಡರ್‌ಗಳನ್ನು ಹೊಂದಿಸುತ್ತೇವೆ ಮತ್ತು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಎಲ್ಲಾ CSS ಮತ್ತು JavaScript ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುತ್ತೇವೆ.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಆಮದು ಮಾಡಿ

Webpack ಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲು ನಾವು ಮೊದಲ ವಿಭಾಗದಲ್ಲಿ ಸ್ಥಾಪಿಸಿದ ಲೋಡರ್‌ಗಳ ಅಗತ್ಯವಿದೆ. ನಾವು ಅವುಗಳನ್ನು npm ನೊಂದಿಗೆ ಸ್ಥಾಪಿಸಿದ್ದೇವೆ, ಆದರೆ ಈಗ ಅವುಗಳನ್ನು ಬಳಸಲು Webpack ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಬೇಕಾಗಿದೆ.

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

    ನಮಗೆ ಈ ಎಲ್ಲಾ ಲೋಡರ್‌ಗಳು ಏಕೆ ಬೇಕು ಎಂಬುದರ ರೀಕ್ಯಾಪ್ ಇಲ್ಲಿದೆ. HTML ಪುಟದಲ್ಲಿನ ಒಂದು ಅಂಶಕ್ಕೆ style-loaderCSS ಅನ್ನು ಚುಚ್ಚುತ್ತದೆ, ಬಳಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ ಮತ್ತು , ಆಟೋಪ್ರಿಫಿಕ್ಸರ್‌ಗೆ ಅಗತ್ಯವಿದೆ ಮತ್ತು Sass ಅನ್ನು ಬಳಸಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.<style><head>css-loader@importurl()postcss-loadersass-loader

  2. ಈಗ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ CSS ಅನ್ನು ಆಮದು ಮಾಡೋಣ. src/scss/styles.scssಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಎಲ್ಲಾ ಮೂಲ Sass ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲು ಕೆಳಗಿನವುಗಳನ್ನು ಸೇರಿಸಿ .

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

    ನೀವು ಬಯಸಿದರೆ ನಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಆಮದು ಮಾಡಿಕೊಳ್ಳಬಹುದು. ವಿವರಗಳಿಗಾಗಿ ನಮ್ಮ ಸಾಸ್ ಆಮದು ಡಾಕ್ಸ್ ಓದಿ .

  3. ಮುಂದೆ ನಾವು CSS ಅನ್ನು ಲೋಡ್ ಮಾಡುತ್ತೇವೆ ಮತ್ತು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುತ್ತೇವೆ. CSS ಅನ್ನು ಲೋಡ್ ಮಾಡಲು ಕೆಳಗಿನವುಗಳನ್ನು ಸೇರಿಸಿ ಮತ್ತು src/js/main.jsಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಎಲ್ಲಾ 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 ಡಾಕ್ಸ್ ಅನ್ನು ಓದಿ .

  4. ಮತ್ತು ನೀವು ಮುಗಿಸಿದ್ದೀರಿ! 🎉 ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಮೂಲ Sass ಮತ್ತು JS ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಆಗಿದ್ದರೆ, ನಿಮ್ಮ ಸ್ಥಳೀಯ ಅಭಿವೃದ್ಧಿ ಸರ್ವರ್ ಈಗ ಈ ರೀತಿ ಕಾಣುತ್ತದೆ.

    ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ ವೆಬ್‌ಪ್ಯಾಕ್ ದೇವ್ ಸರ್ವರ್ ಚಾಲನೆಯಲ್ಲಿದೆ

    ಈಗ ನೀವು ಬಳಸಲು ಬಯಸುವ ಯಾವುದೇ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಘಟಕಗಳನ್ನು ಸೇರಿಸಲು ಪ್ರಾರಂಭಿಸಬಹುದು. ಹೆಚ್ಚುವರಿ ಕಸ್ಟಮ್ ಸಾಸ್ ಅನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು ಮತ್ತು ನಿಮಗೆ ಅಗತ್ಯವಿರುವ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ 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 ಫೈಲ್‌ಗಳನ್ನು ಹೊರತೆಗೆಯಲಾಗುತ್ತಿದೆ

data:ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ CSS ಇನ್‌ಲೈನ್ URI ಗಳ ಮೂಲಕ SVG ಫೈ���್‌ಗಳಿಗೆ ಬಹು ಉಲ್ಲೇಖಗಳನ್ನು ಒಳಗೊಂಡಿದೆ . ಚಿತ್ರಗಳಿಗಾಗಿ URI ಗಳನ್ನು ನಿರ್ಬಂಧಿಸುವ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗಾಗಿ ನೀವು ವಿಷಯ ಭದ್ರತಾ ನೀತಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದರೆ data:, ನಂತರ ಈ SVG ಫೈಲ್‌ಗಳು ಲೋಡ್ ಆಗುವುದಿಲ್ಲ. ವೆಬ್‌ಪ್ಯಾಕ್‌ನ ಆಸ್ತಿ ಮಾಡ್ಯೂಲ್ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಬಳಸಿಕೊಂಡು ಇನ್‌ಲೈನ್ 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/iconsಮತ್ತು CSS ನಿಂದ ಸರಿಯಾಗಿ ಉಲ್ಲೇಖಿಸಲಾಗಿದೆ.

ಇಲ್ಲಿ ಏನಾದರೂ ತಪ್ಪಾಗಿದೆ ಅಥವಾ ಅವಧಿ ಮೀರಿದೆಯೇ? ದಯವಿಟ್ಟು GitHub ನಲ್ಲಿ ಸಮಸ್ಯೆಯನ್ನು ತೆರೆಯಿರಿ . ದೋಷನಿವಾರಣೆಗೆ ಸಹಾಯ ಬೇಕೇ? GitHub ನಲ್ಲಿ ಹುಡುಕಿ ಅಥವಾ ಚರ್ಚೆಯನ್ನು ಪ್ರಾರಂಭಿಸಿ .