బూట్స్ట్రాప్ & వెబ్‌ప్యాక్
వెబ్‌ప్యాక్‌ని ఉపయోగించి మీ ప్రాజెక్ట్‌లో బూట్స్ట్రాప్ యొక్క CSS మరియు జావాస్క్రిప్ట్‌లను ఎలా చేర్చాలి మరియు బండిల్ చేయాలి అనే దాని గురించి అధికారిక గైడ్.
సెటప్
మేము మొదటి నుండి బూట్‌స్ట్రాప్‌తో వెబ్‌ప్యాక్ ప్రాజెక్ట్‌ను రూపొందిస్తున్నాము, కాబట్టి మేము నిజంగా ప్రారంభించడానికి ముందు కొన్ని ముందస్తు అవసరాలు మరియు ముందస్తు దశలు ఉన్నాయి. ఈ గైడ్‌కు మీరు Node.jsని ఇన్‌స్టాల్ చేసి, టెర్మినల్‌తో కొంత అవగాహన కలిగి ఉండాలి.
-
ప్రాజెక్ట్ ఫోల్డర్‌ను సృష్టించండి మరియు npmని సెటప్ చేయండి. మేము అన్ని ఇంటరాక్టివ్ ప్రశ్నలను అడగకుండా ఉండటానికి మేము
my-projectఫోల్డర్‌ను సృష్టిస్తాము మరియు ఆర్గ్యుమెంట్‌తో npmని ప్రారంభిస్తాము .-ymkdir 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 -
అదనపు డిపెండెన్సీలను ఇన్‌స్టాల్ చేయండి. Webpack మరియు Bootstrapతో పాటు, Webpackతో బూట్స్ట్రాప్ యొక్క 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మీ ఎడిటర్‌లో తెరవండి . ఇది ఖాళీగా ఉన్నందున, మేము దీనికి కొంత బాయిలర్‌ప్లేట్ కాన్ఫిగరేషన్‌ను జోడించాలి, తద్వారా మేము మా సర్వర్‌ని ప్రారంభించవచ్చు. కాన్ఫిగర్‌లోని ఈ భాగం Webpack మా ప్రాజెక్ట్ యొక్క 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. బండిల్ చేయబడిన 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>Webpack ద్వారా బూట్స్ట్రాప్ CSS ఎప్పుడు లోడ్ అవుతుందో చూడడానికి మేము
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
ఈ గైడ్‌కి తదుపరి మరియు చివరి విభాగంలో, మేము వెబ్‌ప్యాక్ లోడర్‌లను సెటప్ చేస్తాము మరియు బూట్స్ట్రాప్ యొక్క మొత్తం 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-loaderCSS ని ఇంజెక్ట్ చేస్తుంది, ఉపయోగించడంలో సహాయపడుతుంది మరియు , ఆటోప్రిఫిక్సర్‌కు అవసరం మరియు 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";మీకు కావాలంటే మీరు మా స్టైల్‌షీట్‌లను వ్యక్తిగతంగా కూడా దిగుమతి చేసుకోవచ్చు. వివరాల కోసం మా సాస్ దిగుమతి డాక్స్ చదవండి .
-
తరువాత మేము 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'బండిల్ పరిమాణాలను తగ్గించడానికి మీరు జావాస్క్రిప్ట్ ప్లగిన్‌లను ఒక్కొక్కటిగా దిగుమతి చేసుకోవచ్చు:
import Alert from 'bootstrap/js/dist/alert' // or, specify which plugins you need: import { Tooltip, Toast, Popover } from 'bootstrap'బూట్స్ట్రాప్ ప్లగిన్‌లను ఎలా ఉపయోగించాలో మరింత సమాచారం కోసం మా జావాస్క్రిప్ట్ డాక్స్ చదవండి .
-
మరియు మీరు పూర్తి చేసారు! 🎉 బూట్స్ట్రాప్ యొక్క మూలం 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లో శోధించండి లేదా చర్చను ప్రారంభించండి .