ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
Check
in English

ਬੂਟਸਟਰੈਪ ਅਤੇ ਵੈਬਪੈਕ

ਵੈਬਪੈਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਦੇ CSS ਅਤੇ JavaScript ਨੂੰ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ ਅਤੇ ਬੰਡਲ ਕਰਨਾ ਹੈ ਇਸ ਲਈ ਅਧਿਕਾਰਤ ਗਾਈਡ।

ਇਸ ਪੰਨੇ 'ਤੇ
ਅੰਤ ਤੱਕ ਛੱਡਣਾ ਚਾਹੁੰਦੇ ਹੋ? ਇਸ ਗਾਈਡ ਲਈ ਸਰੋਤ ਕੋਡ ਅਤੇ ਕਾਰਜਸ਼ੀਲ ਡੈਮੋ ਨੂੰ twbs/ਉਦਾਹਰਨ ਰਿਪੋਜ਼ਟਰੀ ਤੋਂ ਡਾਊਨਲੋਡ ਕਰੋ । ਤੁਸੀਂ ਲਾਈਵ ਸੰਪਾਦਨ ਲਈ StackBlitz ਵਿੱਚ ਉਦਾਹਰਨ ਵੀ ਖੋਲ੍ਹ ਸਕਦੇ ਹੋ।

ਸਥਾਪਨਾ ਕਰਨਾ

ਅਸੀਂ ਸਕ੍ਰੈਚ ਤੋਂ ਬੂਟਸਟਰੈਪ ਦੇ ਨਾਲ ਇੱਕ ਵੈਬਪੈਕ ਪ੍ਰੋਜੈਕਟ ਬਣਾ ਰਹੇ ਹਾਂ, ਇਸਲਈ ਅਸਲ ਵਿੱਚ ਸ਼ੁਰੂਆਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਕੁਝ ਪੂਰਵ-ਲੋੜਾਂ ਅਤੇ ਅਗਲੇ ਪੜਾਅ ਹਨ। ਇਸ ਗਾਈਡ ਲਈ ਤੁਹਾਨੂੰ Node.js ਸਥਾਪਤ ਕਰਨ ਅਤੇ ਟਰਮੀਨਲ ਨਾਲ ਕੁਝ ਜਾਣੂ ਹੋਣ ਦੀ ਲੋੜ ਹੈ।

  1. ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਬਣਾਓ ਅਤੇ ਐਨਪੀਐਮ ਸੈੱਟਅੱਪ ਕਰੋ। ਅਸੀਂ 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. ਵਾਧੂ ਨਿਰਭਰਤਾ ਸਥਾਪਤ ਕਰੋ। ਵੈੱਬਪੈਕ ਅਤੇ ਬੂਟਸਟਰੈਪ ਤੋਂ ਇਲਾਵਾ, ਸਾਨੂੰ ਵੈਬਪੈਕ ਨਾਲ ਬੂਟਸਟਰੈਪ ਦੇ 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ਆਪਣੇ ਸੰਪਾਦਕ ਵਿੱਚ ਖੋਲ੍ਹੋ । ਕਿਉਂਕਿ ਇਹ ਖਾਲੀ ਹੈ, ਸਾਨੂੰ ਇਸ ਵਿੱਚ ਕੁਝ ਬੋਇਲਰਪਲੇਟ ਸੰਰਚਨਾ ਜੋੜਨ ਦੀ ਲੋੜ ਪਵੇਗੀ ਤਾਂ ਜੋ ਅਸੀਂ ਆਪਣਾ ਸਰਵਰ ਚਾਲੂ ਕਰ ਸਕੀਏ। ਸੰਰਚਨਾ ਦਾ ਇਹ ਹਿੱਸਾ ਵੈਬਪੈਕ ਨੂੰ ਸਾਡੇ ਪ੍ਰੋਜੈਕਟ ਦੀ 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
  }
}

  2. ਅੱਗੇ ਅਸੀਂ ਆਪਣਾ ਭਰਦੇ ਹਾਂ dist/index.html. ਇਹ HTML ਪੰਨਾ ਹੈ ਵੈੱਬਪੈਕ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਬੰਡਲ ਕੀਤੇ CSS ਅਤੇ JS ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਲੋਡ ਕਰੇਗਾ ਜਿਸ ਨੂੰ ਅਸੀਂ ਬਾਅਦ ਦੇ ਪੜਾਵਾਂ ਵਿੱਚ ਜੋੜਾਂਗੇ। ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਕਿ ਅਸੀਂ ਅਜਿਹਾ ਕਰ ਸਕੀਏ, ਸਾਨੂੰ ਇਸ ਨੂੰ ਪੇਸ਼ ਕਰਨ ਲਈ ਕੁਝ ਦੇਣਾ ਪਵੇਗਾ ਅਤੇ 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>ਇਸ ਲਈ ਅਸੀਂ ਵੇਖ ਸਕਦੇ ਹਾਂ ਕਿ ਜਦੋਂ ਬੂਟਸਟਰੈਪ ਦਾ CSS ਵੈਬਪੈਕ ਦੁਆਰਾ ਲੋਡ ਹੁੰਦਾ ਹੈ।

  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
    ਵੈੱਬਪੈਕ ਦੇਵ ਸਰਵਰ ਚੱਲ ਰਿਹਾ ਹੈ

ਇਸ ਗਾਈਡ ਦੇ ਅਗਲੇ ਅਤੇ ਅੰਤਮ ਭਾਗ ਵਿੱਚ, ਅਸੀਂ ਵੈਬਪੈਕ ਲੋਡਰ ਸਥਾਪਤ ਕਰਾਂਗੇ ਅਤੇ ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਦੇ CSS ਅਤੇ JavaScript ਨੂੰ ਆਯਾਤ ਕਰਾਂਗੇ।

ਬੂਟਸਟਰੈਪ ਆਯਾਤ ਕਰੋ

ਵੈਬਪੈਕ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਨੂੰ ਆਯਾਤ ਕਰਨ ਲਈ ਉਹਨਾਂ ਲੋਡਰਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜੋ ਅਸੀਂ ਪਹਿਲੇ ਭਾਗ ਵਿੱਚ ਸਥਾਪਿਤ ਕੀਤੇ ਹਨ। ਅਸੀਂ ਉਹਨਾਂ ਨੂੰ 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";

    ਜੇਕਰ ਤੁਸੀਂ ਚਾਹੋ ਤਾਂ ਤੁਸੀਂ ਸਾਡੀਆਂ ਸਟਾਈਲਸ਼ੀਟਾਂ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਵੀ ਆਯਾਤ ਕਰ ਸਕਦੇ ਹੋ। ਵੇਰਵਿਆਂ ਲਈ ਸਾਡੇ Sass ਆਯਾਤ ਦਸਤਾਵੇਜ਼ ਪੜ੍ਹੋ।

  3. ਅੱਗੇ ਅਸੀਂ CSS ਲੋਡ ਕਰਦੇ ਹਾਂ ਅਤੇ ਬੂਟਸਟਰੈਪ ਦੀ JavaScript ਨੂੰ ਆਯਾਤ ਕਰਦੇ ਹਾਂ। 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'

    ਬੰਡਲ ਦੇ ਆਕਾਰ ਨੂੰ ਘੱਟ ਰੱਖਣ ਲਈ ਤੁਸੀਂ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਪਲੱਗਇਨਾਂ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਵੀ ਆਯਾਤ ਕਰ ਸਕਦੇ ਹੋ:

    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ਆਵੇਗੀ, ਜਿਸ ਵਿੱਚ 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 ਵਿੱਚ ਇਨਲਾਈਨ URIs ਦੁਆਰਾ SVG ਫਾਈਲਾਂ ਦੇ ਕਈ ਹਵਾਲੇ ਸ਼ਾਮਲ ਹਨ । ਜੇਕਰ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਇੱਕ ਸਮਗਰੀ ਸੁਰੱਖਿਆ ਨੀਤੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹੋ ਜੋ data:ਚਿੱਤਰਾਂ ਲਈ URI ਨੂੰ ਰੋਕਦੀ ਹੈ, ਤਾਂ ਇਹ 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 'ਤੇ ਖੋਜ ਕਰੋ ਜਾਂ ਚਰਚਾ ਸ਼ੁਰੂ ਕਰੋ ।