close

Webpack નવા નિશાળીયા માટે માર્ગદર્શિકા

Webpack આધુનિક વેબ ડેવલપમેન્ટમાં એક અત્યંત ઉપયોગી સાધન છે, જે સંસાધન વ્યવસ્થાપન અને પ્રોજેક્ટ માટે ઑપ્ટિમાઇઝેશનમાં મદદ કરે છે. કેવી રીતે ઉપયોગ કરવો તે અંગે નવા આવનારાઓ માટે અહીં મૂળભૂત માર્ગદર્શિકા છે Webpack:

ઇન્સ્ટોલ કરો Webpack

પ્રથમ, જો તમારી પાસે પહેલાથી ન હોય તો Node.js ઇન્સ્ટોલ કરો. પછી, તમારા પ્રોજેક્ટ માટે ડિરેક્ટરી બનાવો અને તે ડિરેક્ટરીમાં ટર્મિનલ/કમાન્ડ પ્રોમ્પ્ટ વિન્ડો ખોલો. 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 માં ઉપયોગ કરો

dist ડિરેક્ટરીમાં અથવા તમારા મનપસંદ સ્થાનમાં HTML ફાઇલ બનાવો અને bundle.js ફાઇલની લિંક કરો:

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

એપ્લિકેશન ચલાવો

તમારા બ્રાઉઝરમાં HTML ફાઇલ ખોલો અને તપાસો કે તમારી એપ્લિકેશન કામ કરી રહી છે કે કેમ.

આ માત્ર એક મૂળભૂત માર્ગદર્શિકા છે. Webpack CSS હેન્ડલિંગ, મોડ્યુલ્સનું સંચાલન, લોડર્સ અને પ્લગઈન્સનો ઉપયોગ, સ્ત્રોત કોડ ઑપ્ટિમાઇઝેશન અને ઘણું બધું જેવી ઘણી શક્તિશાળી સુવિધાઓ ધરાવે છે. Webpack આ સાધનની ક્ષમતાઓનો સંપૂર્ણ લાભ લેવા માટે અધિકૃત દસ્તાવેજોનું અન્વેષણ કરો .