Webpack ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ ਵਿੱਚ ਇੱਕ ਬਹੁਤ ਹੀ ਲਾਭਦਾਇਕ ਸੰਦ ਹੈ, ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਸਰੋਤ ਪ੍ਰਬੰਧਨ ਅਤੇ ਅਨੁਕੂਲਤਾ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਦਾ ਹੈ। ਇੱਥੇ ਨਵੇਂ ਆਉਣ ਵਾਲਿਆਂ ਲਈ ਇੱਕ ਬੁਨਿਆਦੀ ਗਾਈਡ ਹੈ ਕਿ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ Webpack:
ਇੰਸਟਾਲ ਕਰੋ Webpack
ਸਭ ਤੋਂ ਪਹਿਲਾਂ, Node.js ਇੰਸਟਾਲ ਕਰੋ ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ ਪਹਿਲਾਂ ਤੋਂ ਨਹੀਂ ਹੈ। ਫਿਰ, ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਇੱਕ ਡਾਇਰੈਕਟਰੀ ਬਣਾਓ ਅਤੇ ਉਸ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਇੱਕ ਟਰਮੀਨਲ/ਕਮਾਂਡ ਪ੍ਰੋਂਪਟ ਵਿੰਡੋ ਖੋਲ੍ਹੋ। Webpack ਵੈਬਪੈਕ-ਕਲੀ(ਵੈਬਪੈਕ ਦਾ ਕਮਾਂਡ-ਲਾਈਨ ਇੰਟਰਫੇਸ) ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਅਤੇ ਸਥਾਪਤ ਕਰਨ ਲਈ ਹੇਠ ਲਿਖੀਆਂ ਕਮਾਂਡਾਂ ਚਲਾਓ:
Webpack ਸੰਰਚਨਾ ਬਣਾਓ
webpack.config.js
ਆਪਣੀ ਪ੍ਰੋਜੈਕਟ ਡਾਇਰੈਕਟਰੀ ਦੇ ਰੂਟ ਵਿੱਚ ਨਾਮ ਦੀ ਇੱਕ ਫਾਈਲ ਬਣਾਓ । ਇਹ ਉਹ ਥਾਂ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਸੰਰਚਿਤ ਕਰੋਗੇ Webpack ।
ਫੋਲਡਰ ਅਤੇ ਫਾਈਲਾਂ ਬਣਾਓ
src
ਰੂਟ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਇੱਕ ਫੋਲਡਰ ਬਣਾਓ, ਅਤੇ ਇਸਦੇ ਅੰਦਰ, index.js
ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਮੁੱਖ ਫਾਈਲ ਵਜੋਂ ਸੇਵਾ ਕਰਨ ਲਈ ਨਾਮ ਦੀ ਇੱਕ ਫਾਈਲ ਬਣਾਓ।
ਰਨ Webpack
ਇੱਕ ਨੂੰ ਖੋਲ੍ਹੋ Terminal ਅਤੇ ਆਪਣੇ ਸਰੋਤ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਹੇਠ ਲਿਖੀ ਕਮਾਂਡ ਚਲਾਓ Webpack:
ਇਸ ਕਮਾਂਡ ਨੂੰ ਚਲਾਉਣ ਤੋਂ ਬਾਅਦ, Webpack ਸੰਰਚਨਾ ਦੀ ਪਾਲਣਾ ਕਰੇਗਾ, index.js
ਫਾਈਲ ਨੂੰ ਕੰਪਾਇਲ ਕਰੇਗਾ, ਅਤੇ ਡਾਇਰੈਕਟਰੀ bundle.js
ਵਿੱਚ ਨਾਮ ਦੀ ਇੱਕ ਆਉਟਪੁੱਟ ਫਾਈਲ ਬਣਾਏਗਾ। dist
HTML ਵਿੱਚ ਵਰਤੋਂ
ਡਾਇਰੈਕਟਰੀ ਜਾਂ ਆਪਣੀ ਪਸੰਦੀਦਾ ਸਥਾਨ ਵਿੱਚ ਇੱਕ HTML ਫਾਈਲ ਬਣਾਓ dist
ਅਤੇ bundle.js
ਫਾਈਲ ਨਾਲ ਲਿੰਕ ਕਰੋ:
ਐਪਲੀਕੇਸ਼ਨ ਚਲਾਓ
ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ HTML ਫਾਈਲ ਖੋਲ੍ਹੋ ਅਤੇ ਜਾਂਚ ਕਰੋ ਕਿ ਕੀ ਤੁਹਾਡੀ ਐਪਲੀਕੇਸ਼ਨ ਕੰਮ ਕਰ ਰਹੀ ਹੈ।
ਇਹ ਸਿਰਫ਼ ਇੱਕ ਬੁਨਿਆਦੀ ਗਾਈਡ ਹੈ। Webpack ਵਿੱਚ ਬਹੁਤ ਸਾਰੀਆਂ ਸ਼ਕਤੀਸ਼ਾਲੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ ਜਿਵੇਂ ਕਿ CSS ਨੂੰ ਸੰਭਾਲਣਾ, ਮੌਡਿਊਲਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨਾ, ਲੋਡਰ ਅਤੇ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ, ਸਰੋਤ ਕੋਡ ਅਨੁਕੂਲਤਾ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ। Webpack ਇਸ ਸਾਧਨ ਦੀਆਂ ਸਮਰੱਥਾਵਾਂ ਦਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲਾਭ ਉਠਾਉਣ ਲਈ ਅਧਿਕਾਰਤ ਦਸਤਾਵੇਜ਼ਾਂ ਦੀ ਪੜਚੋਲ ਕਰੋ ।