ਬੂਟਸਟਰੈਪ ਅਤੇ ਵੈਬਪੈਕ
ਵੈਬਪੈਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਦੇ CSS ਅਤੇ JavaScript ਨੂੰ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ ਅਤੇ ਬੰਡਲ ਕਰਨਾ ਹੈ ਇਸ ਲਈ ਅਧਿਕਾਰਤ ਗਾਈਡ।
ਸਥਾਪਨਾ ਕਰਨਾ
ਅਸੀਂ ਸਕ੍ਰੈਚ ਤੋਂ ਬੂਟਸਟਰੈਪ ਦੇ ਨਾਲ ਇੱਕ ਵੈਬਪੈਕ ਪ੍ਰੋਜੈਕਟ ਬਣਾ ਰਹੇ ਹਾਂ, ਇਸਲਈ ਅਸਲ ਵਿੱਚ ਸ਼ੁਰੂਆਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਕੁਝ ਪੂਰਵ-ਲੋੜਾਂ ਅਤੇ ਅਗਲੇ ਪੜਾਅ ਹਨ। ਇਸ ਗਾਈਡ ਲਈ ਤੁਹਾਨੂੰ Node.js ਸਥਾਪਤ ਕਰਨ ਅਤੇ ਟਰਮੀਨਲ ਨਾਲ ਕੁਝ ਜਾਣੂ ਹੋਣ ਦੀ ਲੋੜ ਹੈ।
-
ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਬਣਾਓ ਅਤੇ ਐਨਪੀਐਮ ਸੈੱਟਅੱਪ ਕਰੋ। ਅਸੀਂ
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
ਆਪਣੇ ਸੰਪਾਦਕ ਵਿੱਚ ਖੋਲ੍ਹੋ । ਕਿਉਂਕਿ ਇਹ ਖਾਲੀ ਹੈ, ਸਾਨੂੰ ਇਸ ਵਿੱਚ ਕੁਝ ਬੋਇਲਰਪਲੇਟ ਸੰਰਚਨਾ ਜੋੜਨ ਦੀ ਲੋੜ ਪਵੇਗੀ ਤਾਂ ਜੋ ਅਸੀਂ ਆਪਣਾ ਸਰਵਰ ਚਾਲੂ ਕਰ ਸਕੀਏ। ਸੰਰਚਨਾ ਦਾ ਇਹ ਹਿੱਸਾ ਵੈਬਪੈਕ ਨੂੰ ਸਾਡੇ ਪ੍ਰੋਜੈਕਟ ਦੀ 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 ਪੰਨਾ ਹੈ ਵੈੱਬਪੈਕ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਬੰਡਲ ਕੀਤੇ 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 ਵੈਬਪੈਕ ਦੁਆਰਾ ਲੋਡ ਹੁੰਦਾ ਹੈ। -
ਹੁਣ ਸਾਨੂੰ ਵੈਬਪੈਕ ਨੂੰ ਚਲਾਉਣ ਲਈ ਇੱਕ npm ਸਕ੍ਰਿਪਟ ਦੀ ਲੋੜ ਹੈ। ਹੇਠਾਂ ਦਿਖਾਈ ਗਈ ਸਕ੍ਰਿਪਟ ਨੂੰ ਖੋਲ੍ਹੋ
package.json
ਅਤੇ ਜੋੜੋstart
(ਤੁਹਾਡੇ ਕੋਲ ਪਹਿਲਾਂ ਹੀ ਟੈਸਟ ਸਕ੍ਰਿਪਟ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ)। ਅਸੀਂ ਇਸ ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਆਪਣੇ ਸਥਾਨਕ ਵੈਬਪੈਕ ਦੇਵ ਸਰਵਰ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਕਰਾਂਗੇ।{ // ... "scripts": { "start": "webpack serve --mode development", "test": "echo \"Error: no test specified\" && exit 1" }, // ... }
-
ਅਤੇ ਅੰਤ ਵਿੱਚ, ਅਸੀਂ ਵੈਬਪੈਕ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹਾਂ। ਆਪਣੇ ਟਰਮੀਨਲ ਵਿੱਚ ਫੋਲਡਰ ਤੋਂ
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-loader
CSS ਨੂੰ ਇੰਜੈਕਟ ਕਰਦਾ ਹੈ, ਵਰਤਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਅਤੇ , ਆਟੋਪ੍ਰੀਫਿਕਸਰ ਲਈ ਲੋੜੀਂਦਾ ਹੈ, ਅਤੇ ਸਾਨੂੰ Sass ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।<style>
<head>
css-loader
@import
url()
postcss-loader
sass-loader
-
ਹੁਣ, ਆਉ ਬੂਟਸਟਰੈਪ ਦਾ CSS ਆਯਾਤ ਕਰੀਏ।
src/scss/styles.scss
ਬੂਟਸਟਰੈਪ ਦੇ ਸਾਰੇ ਸਰੋਤ Sass ਨੂੰ ਆਯਾਤ ਕਰਨ ਲਈ ਹੇਠਾਂ ਸ਼ਾਮਲ ਕਰੋ ।// Import all of Bootstrap's CSS @import "~bootstrap/scss/bootstrap";
ਜੇਕਰ ਤੁਸੀਂ ਚਾਹੋ ਤਾਂ ਤੁਸੀਂ ਸਾਡੀਆਂ ਸਟਾਈਲਸ਼ੀਟਾਂ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਵੀ ਆਯਾਤ ਕਰ ਸਕਦੇ ਹੋ। ਵੇਰਵਿਆਂ ਲਈ ਸਾਡੇ Sass ਆਯਾਤ ਦਸਤਾਵੇਜ਼ ਪੜ੍ਹੋ।
-
ਅੱਗੇ ਅਸੀਂ 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 ਦਸਤਾਵੇਜ਼ ਪੜ੍ਹੋ ।
-
ਅਤੇ ਤੁਸੀਂ ਪੂਰਾ ਕਰ ਲਿਆ! 🎉 ਬੂਟਸਟਰੈਪ ਦੇ ਸਰੋਤ 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 'ਤੇ ਖੋਜ ਕਰੋ ਜਾਂ ਚਰਚਾ ਸ਼ੁਰੂ ਕਰੋ ।