close

Webpack Mwongozo kwa Kompyuta

Webpack ni zana muhimu sana katika ukuzaji wa wavuti wa kisasa, inayosaidia katika usimamizi wa rasilimali na uboreshaji wa miradi. Hapa kuna mwongozo wa kimsingi kwa wageni juu ya jinsi ya kutumia Webpack:

Sakinisha Webpack

Kwanza, sakinisha Node.js ikiwa bado hujafanya hivyo. Kisha, tengeneza saraka ya mradi wako na ufungue kidirisha cha Upesi/Amri kwenye saraka hiyo. Tekeleza amri zifuatazo ili kusakinisha Webpack na kubofya webpack(kiolesura cha mstari wa amri cha Webpack):

npm install webpack webpack-cli --save-dev

Unda Webpack Usanidi

Unda faili iliyopewa jina webpack.config.js kwenye mzizi wa saraka ya mradi wako. Hapa ndipo utaweka mipangilio ya 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  
  }  
};

Unda Folda na Faili

Unda src folda kwenye saraka ya mizizi, na ndani yake, unda faili inayoitwa index.js kutumika kama faili kuu ya programu yako.

Kimbia Webpack

Fungua Terminal na endesha amri ifuatayo ili kuunda nambari yako ya chanzo kwa kutumia Webpack:

npx webpack

Baada ya kutekeleza amri hii, Webpack itafuata usanidi, kukusanya index.js faili, na kuunda faili ya pato iliyoitwa bundle.js kwenye dist saraka.

Tumia katika HTML

Unda faili ya HTML kwenye dist saraka au eneo unalopendelea na kiunga cha bundle.js faili:

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

Endesha Programu

Fungua faili ya HTML kwenye kivinjari chako na uangalie ikiwa programu yako inafanya kazi.

Huu ni mwongozo wa msingi tu. Webpack ina vipengele vingi vya nguvu kama vile kushughulikia CSS, moduli za kudhibiti, kutumia vipakiaji na programu-jalizi, uboreshaji wa msimbo wa chanzo, na mengi zaidi. Chunguza hati rasmi Webpack ili kutumia kikamilifu uwezo wa zana hii.