close

Webpack ప్రారంభకులకు గైడ్

Webpack ప్రాజెక్ట్‌ల కోసం వనరుల నిర్వహణ మరియు ఆప్టిమైజేషన్‌లో సహాయపడే ఆధునిక వెబ్ అభివృద్ధిలో అత్యంత ఉపయోగకరమైన సాధనం. ఎలా ఉపయోగించాలో కొత్తవారి కోసం ఇక్కడ ప్రాథమిక గైడ్ ఉంది Webpack:

ఇన్‌స్టాల్ చేయండి Webpack

ముందుగా, మీరు ఇప్పటికే Node.jsని ఇన్‌స్టాల్ చేసి ఉండకపోతే. అప్పుడు, మీ ప్రాజెక్ట్ కోసం డైరెక్టరీని సృష్టించండి మరియు ఆ డైరెక్టరీలో టెర్మినల్/కమాండ్ ప్రాంప్ట్ విండోను తెరవండి. ఇన్‌స్టాల్ చేయడానికి క్రింది ఆదేశాలను అమలు చేయండి Webpack మరియు webpack-cli(Webpack యొక్క కమాండ్-లైన్ ఇంటర్‌ఫేస్):

npm install webpack webpack-cli --save-dev

Webpack కాన్ఫిగరేషన్‌ని సృష్టించండి

webpack.config.js మీ ప్రాజెక్ట్ డైరెక్టరీ యొక్క రూట్‌లో పేరున్న ఫైల్‌ను సృష్టించండి. ఇక్కడే మీరు కాన్ఫిగర్ చేస్తారు Webpack.

const path = require('path');  
  
module.exports = {  
  entry: './src/index.js', // Entry point of your application  
  output: {  
    filename: 'bundle.js', // Output file name  
    path: path.resolve(__dirname, 'dist') // Output directory  
  }  
};

ఫోల్డర్‌లు మరియు ఫైల్‌లను సృష్టించండి

రూట్ డైరెక్టరీలో ఒక src ఫోల్డర్‌ను సృష్టించండి మరియు దానిలో, index.js మీ అప్లికేషన్ కోసం ప్రధాన ఫైల్‌గా పనిచేయడానికి ఒక ఫైల్‌ను సృష్టించండి.

పరుగు Webpack

మీ సోర్స్ కోడ్‌ను ఉపయోగించి కంపైల్ చేయడానికి a తెరిచి Terminal కింది ఆదేశాన్ని అమలు చేయండి Webpack:

npx webpack

ఈ ఆదేశాన్ని అమలు చేసిన తర్వాత, Webpack కాన్ఫిగరేషన్‌ను అనుసరిస్తుంది, index.js ఫైల్‌ను కంపైల్ చేస్తుంది మరియు డైరెక్టరీలో పేరు పెట్టబడిన అవుట్‌పుట్ ఫైల్‌ను bundle.js సృష్టిస్తుంది dist.

HTMLలో ఉపయోగించండి

డైరెక్టరీలో HTML ఫైల్‌ని dist లేదా మీరు ఇష్టపడే ప్రదేశంలో సృష్టించండి మరియు bundle.js ఫైల్‌కి లింక్ చేయండి:

<!DOCTYPE html>  
<html>  
<head>  
  <title>Webpack App</title>  
</head>  
<body>  
  <script src="bundle.js"></script>  
</body>  
</html>

అప్లికేషన్‌ను రన్ చేయండి

మీ బ్రౌజర్‌లో HTML ఫైల్‌ను తెరిచి, మీ అప్లికేషన్ పనిచేస్తుందో లేదో తనిఖీ చేయండి.

ఇది ప్రాథమిక గైడ్ మాత్రమే. Webpack CSSని నిర్వహించడం, మాడ్యూల్‌లను నిర్వహించడం, లోడర్‌లు మరియు ప్లగిన్‌లను ఉపయోగించడం, సోర్స్ కోడ్ ఆప్టిమైజేషన్ మరియు మరిన్ని వంటి అనేక శక్తివంతమైన లక్షణాలను కలిగి ఉంది. Webpack ఈ సాధనం యొక్క సామర్థ్యాలను పూర్తిగా ఉపయోగించుకోవడానికి అధికారిక డాక్యుమెంటేషన్‌ను అన్వేషించండి .