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

ਇੱਕ ਨੂੰ ਖੋਲ੍ਹੋ 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 ਇਸ ਸਾਧਨ ਦੀਆਂ ਸਮਰੱਥਾਵਾਂ ਦਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲਾਭ ਉਠਾਉਣ ਲਈ ਅਧਿਕਾਰਤ ਦਸਤਾਵੇਜ਼ਾਂ ਦੀ ਪੜਚੋਲ ਕਰੋ ।