Webpack kayan aiki ne mai matukar amfani a ci gaban yanar gizo na zamani, yana taimakawa wajen sarrafa albarkatun da inganta ayyukan. Anan ga ainihin jagora ga masu shigowa kan yadda ake amfani da su Webpack:
Shigar Webpack
Da farko, shigar da Node.js idan ba ku riga kuka yi ba. Sa'an nan, ƙirƙiri directory don aikin ku kuma buɗe taga Terminal/Command Prompt a waccan directory. Gudun umarni masu zuwa don shigarwa Webpack da kuma webpack-cli(Ma'anar layin umarni na Webpack):
npm install webpack webpack-cli --save-dev
Ƙirƙiri Webpack Kanfigareshan
Ƙirƙiri fayil mai suna webpack.config.js a cikin tushen kundin tsarin aikin ku. Wannan shine inda zaku saita 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
}
};
Ƙirƙiri Fayiloli da Fayiloli
Ƙirƙiri src babban fayil a cikin tushen directory, kuma a cikinsa, ƙirƙiri fayil mai suna index.js don zama babban fayil ɗin aikace-aikacenku.
Gudu Webpack
Bude a Terminal kuma gudanar da umarni mai zuwa don haɗa lambar tushe ta amfani da Webpack:
npx webpack
Bayan gudanar da wannan umarni, Webpack zai bi tsarin daidaitawa, tattara index.js fayil ɗin, kuma ƙirƙirar fayil ɗin fitarwa mai suna bundle.js a cikin dist kundin adireshi.
Yi amfani da HTML
Ƙirƙiri fayil ɗin HTML a cikin dist kundin adireshin ko wurin da kuka fi so kuma haɗi zuwa bundle.js fayil ɗin:
<!DOCTYPE html>
<html>
<head>
<title>Webpack App</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
Gudanar da Aikace-aikacen
Bude fayil ɗin HTML a cikin burauzar ku kuma duba idan aikace-aikacenku yana aiki.
Wannan jagorar asali ce kawai. Webpack yana da fasaloli masu ƙarfi da yawa kamar sarrafa CSS, sarrafa kayayyaki, amfani da lodi da plugins, inganta lambar tushe, da ƙari mai yawa. Bincika takaddun hukuma Webpack don cikakken amfani da damar wannan kayan aikin.