{"id":11187,"date":"2023-03-09T20:19:49","date_gmt":"2023-03-09T16:49:49","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/optimizing-your-front-end-workflow-with-webpack-5283\/"},"modified":"2023-03-09T20:19:49","modified_gmt":"2023-03-09T16:49:49","slug":"optimizing-your-front-end-workflow-with-webpack-5283","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/optimizing-your-front-end-workflow-with-webpack-5283\/","title":{"rendered":"\u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 Front-end \u062e\u0648\u062f \u0628\u0627 Webpack"},"content":{"rendered":"<div data-article-id=\"1394394\" id=\"article-body\">\n<p>\ud83d\ude80 \u062a\u0627 \u0628\u0647 \u062d\u0627\u0644 \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u062a\u0648\u0633\u0639\u0647 Backend \u0645\u0627\u0646\u0646\u062f Scaling\u060c Architecting\u060c Deploying \u0648 Managing \u0648 \u063a\u06cc\u0631\u0647 \u0635\u062d\u0628\u062a \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645. \u0627\u0645\u0627 \u0627\u0645\u0631\u0648\u0632 \u0645\u0647\u0645\u062a\u0631\u06cc\u0646 \u0686\u06cc\u0632 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u06cc\u062f. <strong>\u0628\u0633\u062a\u0647 \u0648\u0628<\/strong><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/optimizing-your-front-end-workflow-with-webpack-5283\/#%F0%9F%93%8D_%D9%85%D8%B4%DA%A9%D9%84%DB%8C_%DA%A9%D9%87_%D9%88%D8%A8_%D9%BE%DA%A9_%D8%AF%D8%B1_%D8%AD%D8%A7%D9%84_%D8%AD%D9%84_%D8%A2%D9%86_%D8%A7%D8%B3%D8%AA\" >\ud83d\udccd \u0645\u0634\u06a9\u0644\u06cc \u06a9\u0647 \u0648\u0628 \u067e\u06a9 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0644 \u0622\u0646 \u0627\u0633\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/optimizing-your-front-end-workflow-with-webpack-5283\/#%F0%9F%9A%80_%D8%A7%D8%B7%D9%84%D8%A7%D8%B9%D8%A7%D8%AA_%D8%A8%DB%8C%D8%B4%D8%AA%D8%B1_%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87_Webpack\" >\ud83d\ude80 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631\u0628\u0627\u0631\u0647 Webpack<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%93%8D_%D9%85%D8%B4%DA%A9%D9%84%DB%8C_%DA%A9%D9%87_%D9%88%D8%A8_%D9%BE%DA%A9_%D8%AF%D8%B1_%D8%AD%D8%A7%D9%84_%D8%AD%D9%84_%D8%A2%D9%86_%D8%A7%D8%B3%D8%AA\"><\/span>\n<p>  \ud83d\udccd \u0645\u0634\u06a9\u0644\u06cc \u06a9\u0647 \u0648\u0628 \u067e\u06a9 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0644 \u0622\u0646 \u0627\u0633\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0648\u0642\u062a\u06cc \u067e\u0631\u0648\u0698\u0647 \u0645\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u0647\u0645\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0648 \u0641\u0627\u06cc\u0644 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f\u060c \u0645\u0627 \u0631\u0627 \u062f\u0686\u0627\u0631 \u0633\u0631\u062f\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f.  \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0648\u0628\u200c\u067e\u06a9 \u0628\u0647 \u0632\u0628\u0627\u0646 \u0633\u0627\u062f\u0647 \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644 \u0631\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u062d\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u062f\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0645\u0627\u0698\u0648\u0644\u200c\u0647\u0627 \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u06a9\u0646\u0646\u062f \u0648 \u0633\u067e\u0633 \u0622\u0646 \u0645\u0627\u0698\u0648\u0644\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0648\u0627\u062d\u062f \u062c\u0645\u0639 \u06a9\u0646\u0646\u062f.  Webpack \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0631\u0627\u06cc \u0628\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u062f\u0627\u0631\u0627\u06cc\u06cc\u200c\u0647\u0627\u06cc front-end \u0645\u0627\u0646\u0646\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c CSS \u0648 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0648\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<p><\/p>\n<p><em>\u0646\u06af\u0631\u0627\u0646 \u0646\u0628\u0627\u0634\u06cc\u062f \u0645\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0633\u0627\u062f\u0647 \u0631\u0627 \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u06cc\u062f.<\/em><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/03\/1678380589_386_\u0628\u0647\u06cc\u0646\u0647-\u0633\u0627\u0632\u06cc-\u06af\u0631\u062f\u0634-\u06a9\u0627\u0631-Front-end-\u062e\u0648\u062f-\u0628\u0627-Webpack.png\" alt=\"\u0628\u0633\u062a\u0647 \u0648\u0628 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f\" loading=\"lazy\" width=\"880\" height=\"369\" title=\"\"><\/p>\n<ul>\n<li>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 Repo \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%9A%80_%D8%A7%D8%B7%D9%84%D8%A7%D8%B9%D8%A7%D8%AA_%D8%A8%DB%8C%D8%B4%D8%AA%D8%B1_%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87_Webpack\"><\/span>\n<p>  \ud83d\ude80 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631\u0628\u0627\u0631\u0647 Webpack<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u062e\u06cc \u0686\u06cc\u0632\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0628\u0647 \u063a\u06cc\u0631 \u0627\u0632 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0628\u0633\u062a\u0647 \u0648\u0628 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647\u060c \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc SVG \u0648 \u063a\u06cc\u0631\u0647. \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f \u0644\u0648\u062f\u0631 \u0645\u06cc\u200c\u06af\u0648\u06cc\u0646\u062f.  \u062f\u0631 \u0648\u0628 \u067e\u06a9 \u0644\u0648\u062f\u0631\u0647\u0627 \u0648 \u0627\u0641\u0632\u0648\u0646\u0647 \u0647\u0627\u06cc\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/p>\n<ul>\n<li>\n<p>\u0648\u0638\u06cc\u0641\u0647 \u0644\u0648\u062f\u0631 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0648\u0642\u062a\u06cc \u0686\u06cc\u0632\u0647\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0647\u0633\u062a\u0646\u062f \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0631\u0648\u06cc \u0686\u06cc\u0632\u0647\u0627 \u06a9\u0627\u0631 \u06a9\u0646\u062f.  \u0645\u0627\u0646\u0646\u062f \u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u0641\u0627\u06cc\u0644 \u062a\u06a9\u06cc \u0646\u0647\u0627\u06cc\u06cc\u060c \u0627\u0644\u0632\u0627\u0645\u0627\u062a \u062e\u0627\u0635\u06cc \u0645\u0627\u0646\u0646\u062f Load CSS\u060c Load SVG \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u0648 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f. <strong>\u0644\u0648\u062f\u0631\u0647\u0627<\/strong>.<\/p>\n<\/li>\n<li>\n<p>\u0648 \u067e\u0633 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u0641\u0627\u06cc\u0644 \u062e\u0631\u0648\u062c\u06cc \u0646\u0647\u0627\u06cc\u06cc\u060c \u0627\u06af\u0631 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u0628\u0627\u06cc\u062f \u0627\u0646\u062c\u0627\u0645 \u0634\u0648\u062f\u060c \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f <strong>\u067e\u0644\u0627\u06af\u06cc\u0646 \u0647\u0627<\/strong>.<\/p>\n<\/li>\n<\/ul>\n<p>\ud83d\udc25 \u0627\u06af\u0631 \u0622\u0646 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0646\u06a9\u0631\u062f\u06cc\u062f\u060c \u0646\u06af\u0631\u0627\u0646 \u0646\u0628\u0627\u0634\u06cc\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Webpack \u0622\u0646 \u0631\u0627 \u0628\u06cc\u0634\u062a\u0631 \u062a\u0648\u0636\u06cc\u062d \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f.<\/p>\n<p>\u0641\u0627\u06cc\u0644 Webpack.config.js \u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">path<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">path<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">HtmlWebpackPlugin<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">html-webpack-plugin<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n<span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">entry<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/app\/index.js<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">module<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">rules<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n            <span class=\"c1\">\/\/ JavaScript can not load SVGs directly so we'll use someone's written code in <\/span>\n            <span class=\"c1\">\/\/ svg-inline-loader [installed via npm]<\/span>\n            <span class=\"c1\">\/\/ more about svg-loader:- https:\/\/www.npmjs.com\/package\/svg-inline-loader<\/span>\n            <span class=\"p\">{<\/span>\n                <span class=\"na\">test<\/span><span class=\"p\">:<\/span> <span class=\"sr\">\/<\/span><span class=\"se\">\\.<\/span><span class=\"sr\">svg$\/<\/span><span class=\"p\">,<\/span>\n                <span class=\"na\">loader<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">svg-inline-loader<\/span><span class=\"dl\">'<\/span>\n            <span class=\"p\">},<\/span>\n            <span class=\"c1\">\/\/ Similar to svg-loader, we are using css-loader to load the css and style-loader to inject css into <\/span>\n            <span class=\"c1\">\/\/ our files<\/span>\n            <span class=\"c1\">\/\/ more about css-loader:- https:\/\/www.npmjs.com\/package\/css-loader <\/span>\n            <span class=\"c1\">\/\/ Note:- css-loader is dependent on style-loader<\/span>\n            <span class=\"p\">{<\/span>\n                <span class=\"na\">test<\/span><span class=\"p\">:<\/span> <span class=\"sr\">\/<\/span><span class=\"se\">\\.<\/span><span class=\"sr\">css$\/i<\/span><span class=\"p\">,<\/span>\n                <span class=\"na\">use<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">style-loader<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">css-loader<\/span><span class=\"dl\">\"<\/span><span class=\"p\">],<\/span>\n            <span class=\"p\">},<\/span>\n            <span class=\"c1\">\/\/ Babel makes our modern JS (JS having features<\/span>\n            <span class=\"c1\">\/\/ like arrow functions etc) run on old browsers that donot support new JS.<\/span>\n            <span class=\"p\">{<\/span>\n                <span class=\"c1\">\/\/ This is a Regex which says any js file having js, jsx will be loaded by babel<\/span>\n                <span class=\"na\">test<\/span><span class=\"p\">:<\/span> <span class=\"sr\">\/<\/span><span class=\"se\">\\.(<\/span><span class=\"sr\">js<\/span><span class=\"se\">)<\/span><span class=\"sr\">$\/<\/span><span class=\"p\">,<\/span>\n                <span class=\"na\">use<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">babel-loader<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"p\">}<\/span>\n        <span class=\"p\">]<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"na\">output<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"nx\">path<\/span><span class=\"p\">.<\/span><span class=\"nx\">resolve<\/span><span class=\"p\">(<\/span><span class=\"nx\">__dirname<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">dist<\/span><span class=\"dl\">\"<\/span><span class=\"p\">),<\/span>\n        <span class=\"na\">filename<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">bundle.js<\/span><span class=\"dl\">\"<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"c1\">\/\/ After creating bundle.js file, to inject into our index.html file we need HTMLInjection that is provided<\/span>\n    <span class=\"c1\">\/\/ by the below plugin.<\/span>\n    <span class=\"c1\">\/\/ Note:- As written above, Loaders do work before generating the output and plugins do after the output...<\/span>\n\n    <span class=\"c1\">\/\/ It will generate index.html and will take bundle.js to inject into html<\/span>\n    <span class=\"c1\">\/\/ More:- https:\/\/webpack.js.org\/plugins\/html-webpack-plugin\/<\/span>\n    <span class=\"na\">plugins<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"k\">new<\/span> <span class=\"nx\">HtmlWebpackPlugin<\/span><span class=\"p\">()],<\/span>\n\n    <span class=\"c1\">\/\/ Two modes are there:- development, production. Production is more optimized and do minimize the code more<\/span>\n    <span class=\"na\">mode<\/span><span class=\"p\">:<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NODE_ENV<\/span> <span class=\"o\">==<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">production<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">production<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">development<\/span><span class=\"dl\">\"<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\ud83d\udccd \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm i css-loader style-loader <span class=\"nt\">--save-dev<\/span>\nnpm <span class=\"nb\">install<\/span> <span class=\"nt\">--save-dev<\/span> html-webpack-plugin\nnpm <span class=\"nb\">install <\/span>webpack-dev-server <span class=\"nt\">--save-dev<\/span>\nnpm <span class=\"nb\">install <\/span>svg-inline-loader <span class=\"nt\">--save-dev<\/span>\nnpm <span class=\"nb\">install <\/span>webpack webpack-cli <span class=\"nt\">--save-dev<\/span>                                   \n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\ud83d\udccd \u0628\u0631\u062e\u06cc \u0627\u0632 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 package.json \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u06cc\u0645 \u062a\u0627 \u0627\u062c\u0631\u0627 \u0648 \u0633\u0631\u0648\u06cc\u0633 \u0634\u0648\u0646\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"nl\">\"scripts\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"test\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"echo <\/span><span class=\"se\">\\\"<\/span><span class=\"s2\">Error: no test specified<\/span><span class=\"se\">\\\"<\/span><span class=\"s2\"> &amp;&amp; exit 1\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"start\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"webpack serve\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"build\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"NODE_ENV='production' webpack\"<\/span><span class=\"w\">\n  <\/span><span class=\"p\">}<\/span><span class=\"err\">,<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr\/>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0645\u0631\u0648\u0632 \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a.  \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u0637\u0639\u0645 Webpack \u0631\u0627 \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0647\u0646\u06af\u0627\u0645 \u0633\u0627\u062e\u062a \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f \u062e\u0648\u062f \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u060c \u06af\u0631\u0641\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n<hr\/>\n<p><strong>\ud83c\udf89\ud83d\udce2 \u0627\u0637\u0644\u0627\u0639\u06cc\u0647: \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0634\u0631\u0648\u0639 #100daysofcodechallenge \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0645\u062d\u0635\u0648\u0644 \u0646\u0647\u0627\u06cc\u06cc \u0647\u0633\u062a\u06cc\u0645.  \u0642\u0631\u0627\u0631 \u0627\u0633\u062a #Opensource \u0634\u0648\u062f<\/strong> <\/p>\n<p>\ud83d\udd25 \u0645\u062d\u0635\u0648\u0644: &#8211; \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u062a\u062c\u0627\u0631\u062a \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9 \u0642\u0627\u0628\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc \u0633\u0627\u0632\u06cc \ud83d\ude80<\/p>\n<p>\u263a\ufe0f \u0627\u0632 \u0645\u0634\u0627\u0631\u06a9\u062a \u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0628\u0631\u0627\u06cc \u0645\u0628\u062a\u062f\u06cc\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0631\u0627 \u0634\u0631\u0648\u0639 \u0645\u06cc \u06a9\u0646\u0646\u062f \u062e\u0648\u0628 \u0627\u0633\u062a <\/p>\n<p><a href=\"https:\/\/twitter.com\/Lovepre15338771\/status\/1633435515662868481\" rel=\"nofollow noopener\" target=\"_blank\">\u062c\u0632\u0626\u06cc\u0627\u062a \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627<\/a><\/p>\n<\/p><\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\ude80 \u062a\u0627 \u0628\u0647 \u062d\u0627\u0644 \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u062a\u0648\u0633\u0639\u0647 Backend \u0645\u0627\u0646\u0646\u062f Scaling\u060c Architecting\u060c Deploying \u0648 Managing \u0648 \u063a\u06cc\u0631\u0647 \u0635\u062d\u0628\u062a \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645. \u0627\u0645\u0627 \u0627\u0645\u0631\u0648\u0632 \u0645\u0647\u0645\u062a\u0631\u06cc\u0646 \u0686\u06cc\u0632 \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u06cc\u062f. \u0628\u0633\u062a\u0647 \u0648\u0628 \ud83d\udccd \u0645\u0634\u06a9\u0644\u06cc \u06a9\u0647 \u0648\u0628 \u067e\u06a9 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0644 \u0622\u0646 \u0627\u0633\u062a \u0648\u0642\u062a\u06cc \u067e\u0631\u0648\u0698\u0647 \u0645\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u0647\u0645\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0648 \u0641\u0627\u06cc\u0644 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f\u060c \u0645\u0627 \u0631\u0627 \u062f\u0686\u0627\u0631 \u0633\u0631\u062f\u0631\u062f \u0645\u06cc &hellip;<\/p>\n","protected":false},"author":2,"featured_media":11188,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-11187","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/11187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=11187"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/11187\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/11188"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=11187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=11187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=11187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}