बूटस्ट्रैप और वेबपैक
वेबपैक का उपयोग करके अपने प्रोजेक्ट में बूटस्ट्रैप के सीएसएस और जावास्क्रिप्ट को कैसे शामिल करें और कैसे बंडल करें, इसके लिए आधिकारिक गाइड।
स्थापित करना
हम शुरू से बूटस्ट्रैप के साथ एक वेबपैक प्रोजेक्ट बना रहे हैं, इसलिए वास्तव में आरंभ करने से पहले कुछ पूर्वापेक्षाएँ और आगे के चरण हैं। इस गाइड के लिए आपको 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 -
अतिरिक्त निर्भरताएँ स्थापित करें। वेबपैक और बूटस्ट्रैप के अलावा, हमें बूटस्ट्रैप के सीएसएस और जेएस को वेबपैक के साथ ठीक से आयात और बंडल करने के लिए कुछ और निर्भरता की आवश्यकता है। इनमें Sass, कुछ लोडर और Autoprefixer शामिल हैं।
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अपने संपादक में खोलें । चूंकि यह खाली है, हमें इसमें कुछ बॉयलरप्लेट कॉन्फिगर जोड़ने की आवश्यकता होगी ताकि हम अपना सर्वर शुरू कर सकें। कॉन्फिग का यह हिस्सा बताता है कि वेबपैक को हमारे प्रोजेक्ट के जावास्क्रिप्ट की तलाश करनी है, जहां संकलित कोड को (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। बंडल किए गए CSS और JS का उपयोग करने के लिए यह 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>ताकि हम देख सकें कि वेबपैक द्वारा बूटस्ट्रैप का सीएसएस कब लोड किया गया है। -
अब हमें वेबपैक चलाने के लिए एक npm स्क्रिप्ट की आवश्यकता है। नीचे दिखाई गई स्क्रिप्ट खोलें
package.jsonऔर जोड़ेंstart(आपके पास पहले से ही परीक्षण स्क्रिप्ट होनी चाहिए)। हम अपने स्थानीय वेबपैक देव सर्वर को प्रारंभ करने के लिए इस स्क्रिप्ट का उपयोग करेंगे।{ // ... "scripts": { "start": "webpack serve --mode development", "test": "echo \"Error: no test specified\" && exit 1" }, // ... } -
और अंत में, हम वेबपैक शुरू कर सकते हैं। अपने टर्मिनल के
my-projectफ़ोल्डर से, उस नई जोड़ी गई npm स्क्रिप्ट को चलाएँ:npm start
इस गाइड के अगले और अंतिम खंड में, हम वेबपैक लोडर सेट करेंगे और बूटस्ट्रैप के सभी सीएसएस और जावास्क्रिप्ट को आयात करेंगे।
बूटस्ट्रैप आयात करें
बूटस्ट्रैप को वेबपैक में आयात करने के लिए पहले खंड में हमारे द्वारा इंस्टॉल किए गए लोडर की आवश्यकता होती है। हमने उन्हें 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' } ] } ] } }यहां एक संक्षिप्त विवरण दिया गया है कि हमें इन सभी लोडर की आवश्यकता क्यों है। HTML पृष्ठ के एक तत्व में
style-loaderCSS को इंजेक्ट करता है, उपयोग करने में मदद करता है और , Autoprefixer के लिए आवश्यक है, और हमें Sass का उपयोग करने की अनुमति देता है।<style><head>css-loader@importurl()postcss-loadersass-loader -
अब, बूटस्ट्रैप के CSS को इम्पोर्ट करते हैं।
src/scss/styles.scssबूटस्ट्रैप के सभी स्रोत Sass को आयात करने के लिए निम्नलिखित में जोड़ें ।// Import all of Bootstrap's CSS @import "~bootstrap/scss/bootstrap";आप चाहें तो हमारी स्टाइलशीट को अलग-अलग आयात भी कर सकते हैं। विवरण के लिए हमारे Sass आयात दस्तावेज़ पढ़ें ।
-
आगे हम CSS को लोड करते हैं और बूटस्ट्रैप के JavaScript को इम्पोर्ट करते हैं।
src/js/main.jsCSS को लोड करने के लिए निम्नलिखित जोड़ें और बूटस्ट्रैप के सभी 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'बूटस्ट्रैप के प्लगइन्स का उपयोग करने के तरीके के बारे में अधिक जानकारी के लिए हमारे जावास्क्रिप्ट दस्तावेज़ पढ़ें ।
-
और आपने कल लिया! बूटस्ट्रैप के स्रोत Sass और JS के पूरी तरह से लोड होने के साथ, आपका स्थानीय विकास सर्वर अब इस तरह दिखना चाहिए ।
अब आप किसी भी बूटस्ट्रैप घटक को जोड़ना शुरू कर सकते हैं जिसका आप उपयोग करना चाहते हैं। अतिरिक्त कस्टम Sass को शामिल करने और बूटस्ट्रैप के CSS और JS के केवल उन हिस्सों को आयात करके अपने निर्माण को अनुकूलित करने के तरीके के लिए संपूर्ण वेबपैक उदाहरण प्रोजेक्ट की जाँच करना सुनिश्चित करें , जिनकी आपको आवश्यकता है।
उत्पादन अनुकूलन
आपके सेटअप के आधार पर, आप परियोजना को उत्पादन में चलाने के लिए उपयोगी कुछ अतिरिक्त सुरक्षा और गति अनुकूलन लागू करना चाह सकते हैं। ध्यान दें कि ये अनुकूलन वेबपैक उदाहरण प्रोजेक्ट पर लागू नहीं होते हैं और लागू करने के लिए आप पर निर्भर हैं।
सीएसएस निकालना
हमने ऊपर style-loaderकॉन्फ़िगर किया है आसानी से सीएसएस को बंडल में छोड़ देता है ताकि मैन्युअल रूप से एक सीएसएस फ़ाइल लोड dist/index.htmlकरना आवश्यक न हो। हालाँकि, यह दृष्टिकोण सख्त सामग्री सुरक्षा नीति के साथ काम नहीं कर सकता है, और बड़े बंडल आकार के कारण यह आपके आवेदन में एक अड़चन बन सकता है।
CSS को अलग करने के लिए ताकि हम इसे सीधे से लोड कर सकें , Webpack प्लगइन 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। आप जेनरेट किए गए सीएसएस को 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सीएसएस से निकाली गई और ठीक से संदर्भित एसवीजी फाइलें मिलेंगी।
यहां कुछ गलत या पुराना देखें? कृपया GitHub पर एक समस्या खोलें । समस्या निवारण में सहायता चाहिए? GitHub पर खोजें या चर्चा शुरू करें।