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

Terminal உங்கள் மூலக் குறியீட்டை தொகுக்க, a ஐத் திறந்து பின்வரும் கட்டளையை இயக்கவும் 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 இந்தக் கருவியின் திறன்களை முழுமையாகப் பயன்படுத்த அதிகாரப்பூர்வ ஆவணங்களை ஆராயவும் .