{"id":10136,"date":"2023-09-10T12:42:47","date_gmt":"2023-09-10T12:42:47","guid":{"rendered":"https:\/\/programmingfields.com\/?p=10136"},"modified":"2026-01-27T02:47:19","modified_gmt":"2026-01-27T02:47:19","slug":"web-apps-using-javascripts-most-popular-build-tool-webpack-2","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/","title":{"rendered":"Web Apps Using Javascript&#8217;s Most Popular Build Tool WEBPACK 2"},"content":{"rendered":"\n<p>The <strong>Webpack<\/strong> tool is a very popular tool these days. As a web developer. I think it is an important skill to know about <strong>React<\/strong> <strong>Webpack<\/strong>. How to read and understand documentation. When you are learning React or you are just a beginner. You create an App using <strong>create-react-app<\/strong>. But this method abstracts away the project setup. Perhaps abstraction is not something always we want. Using React webpack we can get complete control of all the configurations in the <strong>React Ap<\/strong>p. In this tutorial, I&#8217;m literally just going to walk you through step by step the documentation. Also, I&#8217;ll be showing you examples along the way and details about the <strong>webpack.config<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/webpack.png?resize=1024%2C536&#038;ssl=1\" alt=\"webpack image\" class=\"wp-image-10137\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/webpack.png?resize=1024%2C536&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/webpack.png?resize=300%2C157&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/webpack.png?resize=768%2C402&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/webpack.png?resize=150%2C79&amp;ssl=1 150w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/webpack.png?w=1510&amp;ssl=1 1510w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p class=\"recommended-link\">Recommended: <a href=\"https:\/\/programmingfields.com\/how-to-use-uselocation-hook-in-react-router-dom-v6\/\">How to Use Location Hook in React Router DOM V6<\/a><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/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=\"Toggle Table of Content\"><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:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#What_is_Webpack_2\" >What is Webpack 2?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#How_you_can_use_Webpack_in_a_Reactjs_project\" >How you can use Webpack in a React.js project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#Key_Features_of_Webpack_2\" >Key Features of Webpack 2<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#1_Code_Splitting\" >1. Code Splitting<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#2_Tree_Shaking\" >2. Tree Shaking<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#3_Better_Configuration\" >3. Better Configuration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#4_Improved_Performance\" >4. Improved Performance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#5_Asset_Management\" >5. Asset Management<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#Step_1_%E2%80%93_Create_a_Folder_REACT-TEMPLATE\" >Step 1 &#8211;  Create a Folder REACT-TEMPLATE<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#Step_2_%E2%80%93_Install_Webpack\" >Step 2 &#8211; Install Webpack<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#Step_3_%E2%80%93_Create_another_folder_src_and_dist\" >Step 3 &#8211; Create another folder src and dist<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#Step_4_%E2%80%93_Create_a_webpackconfigjs_file_in_the_root_folder\" >Step 4 &#8211; Create a webpack.config.js file in the root folder<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#Step_5_%E2%80%93_Output_Bundlejs_File\" >Step 5 &#8211; Output Bundle.js File<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#Loaders_in_webpack\" >Loaders in webpack<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#Setup_Sass_in_webpackconfigjs\" >Setup Sass in webpack.config.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#Add_Babel_for_Using_the_Latest_Javascript_Version\" >Add Babel for Using the Latest Javascript Version<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#Save_Webpack_Automatically_%E2%80%93_Watch\" >Save Webpack Automatically &#8211; Watch<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/programmingfields.com\/web-apps-using-javascripts-most-popular-build-tool-webpack-2\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_Webpack_2\"><\/span><strong>What is Webpack 2?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Webpack is a module bundler for JavaScript applications. It takes modules with dependencies and generates static assets representing those modules. In simpler terms, Webpack helps you manage and optimize your JavaScript code, stylesheets, and assets.<\/p>\n\n\n\n<p>Webpack 2 is the second major version of this tool and comes with significant improvements and enhancements over its predecessor. It offers a more streamlined configuration, better performance, and enhanced code-splitting capabilities.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_you_can_use_Webpack_in_a_Reactjs_project\"><\/span><strong>How you can use Webpack in a React.js project<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If you want to integrate styles, some other packages or plugins. You can use webpack. In this tutorial you will learn how a loader works, how a plugin works, and most importantly, You will understand how to navigate the documentation. <\/p>\n\n\n\n<p>So It&#8217;s a module bundler for JavaScript applications, styles, and assets. <\/p>\n\n\n\n<p>The above diagram actually gives a really good description of what webpack does. It&#8217;s going to take all your files, all your assets, whether that&#8217;s SAS files, access handlebars, JavaScript files, JPEG photos, fonts, whatever, all the different assets that you need for your project, that&#8217;s going to take all of these things. And what it really does is it manages dependencies like it says down here, modules with dependencies. So it keeps track of all these different files who rely on all these different files and all these different assets. And then it goes through the Web. Then at the other end, webpack can output a single JavaScript file or multiple single access files.<\/p>\n\n\n\n<p class=\"recommended-link\">Recommended: <a href=\"https:\/\/programmingfields.com\/redirect-to-component-with-props-using-usenavigate-hook\/\">Redirect to Component with Props Using useNavigate Hook<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Key_Features_of_Webpack_2\"><\/span><strong>Key Features of Webpack 2<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let&#8217;s dive into some of the standout features that make Webpack 2 a game-changer for web developers:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Code_Splitting\"><\/span>1. <strong>Code Splitting<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The webpack 2 introduces improved support for code splitting, allowing you to load only the code needed for a particular page or feature. This can significantly improve your application&#8217;s load times, especially for large-scale applications.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Tree_Shaking\"><\/span><strong>2. Tree Shaking<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>With <strong>Webpack 2<\/strong>, you can perform dead code elimination through a feature called &#8220;tree shaking.&#8221; This means that only the code that is actually used in your application will be included in the final bundle, reducing its size and improving performance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Better_Configuration\"><\/span><strong>3. Better Configuration<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Webpack 2 simplifies configuration with a more intuitive setup. You can use ES6 module syntax for configuration, and the default configuration settings have been optimized for most common use cases, reducing the need for extensive custom configurations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Improved_Performance\"><\/span><strong>4. Improved Performance<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The webpack 2 is faster and more efficient than its predecessor. It optimizes builds, resulting in shorter build times, which is crucial for a smooth development workflow.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Asset_Management\"><\/span><strong>5. Asset Management<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Webpack 2 can handle various assets, including images, fonts, and CSS, making it a comprehensive tool for managing all your project&#8217;s assets.<\/p>\n\n\n\n<p>Now that we&#8217;ve covered some of the key features, let&#8217;s briefly outline how to get started with Webpack 2.<\/p>\n\n\n\n<p class=\"recommended-link\">Recommended: <a href=\"https:\/\/programmingfields.com\/deploy-a-react-application-on-cpanel-in-a-subdirectory\/\">How to Deploy a React Application on a cPanel in a Subdirectory<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_%E2%80%93_Create_a_Folder_REACT-TEMPLATE\"><\/span><strong>Step 1 &#8211;  Create a Folder REACT-TEMPLATE<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Then run the below command. This will create the <strong>package.json<\/strong> file inside the <strong>react-template<\/strong> folder.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">npm init -y<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"490\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-5.55.45-PM.png?resize=1024%2C490&#038;ssl=1\" alt=\"package.json\" class=\"wp-image-10138\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-5.55.45-PM.png?resize=1024%2C490&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-5.55.45-PM.png?resize=300%2C143&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-5.55.45-PM.png?resize=768%2C367&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-5.55.45-PM.png?resize=1536%2C734&amp;ssl=1 1536w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-5.55.45-PM.png?resize=150%2C72&amp;ssl=1 150w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-5.55.45-PM.png?w=1920&amp;ssl=1 1920w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n<\/div>\n\n\n<p>You can change the author&#8217;s name and license if you wish to change. Again, none of this really matters.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_%E2%80%93_Install_Webpack\"><\/span><strong>Step 2 &#8211; Install Webpack<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You can install Webpack 2 globally or locally to your project using npm or yarn<\/p>\n\n\n\n<pre title=\"\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">npm add -D webpack<\/code><\/pre>\n\n\n\n<p>It will add the webpack dependencies in the <strong>package.json<\/strong> file. Here, the webpack version is 5.88.2<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"559\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-6.04.18-PM.png?resize=1024%2C559&#038;ssl=1\" alt=\"webpack dependencies\" class=\"wp-image-10139\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-6.04.18-PM.png?resize=1024%2C559&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-6.04.18-PM.png?resize=300%2C164&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-6.04.18-PM.png?resize=768%2C420&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-6.04.18-PM.png?resize=1536%2C839&amp;ssl=1 1536w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-6.04.18-PM.png?resize=150%2C82&amp;ssl=1 150w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-6.04.18-PM.png?w=1922&amp;ssl=1 1922w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"recommended-link\">Recommended: <a href=\"https:\/\/programmingfields.com\/how-to-create-react-todo-app-using-redux-for-beginners\/\">How to Create Todo App in React JS Using Redux<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3_%E2%80%93_Create_another_folder_src_and_dist\"><\/span><strong>Step 3 &#8211; Create another folder src and dist<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Inside the <strong>src<\/strong> folder create an <strong>index.js<\/strong> file. After that inside the <strong>dist<\/strong> folder create an <strong>index.html<\/strong> file.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-medium\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"266\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-6.16.15-PM.png?resize=300%2C266&#038;ssl=1\" alt=\"folder structure\" class=\"wp-image-10140\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-6.16.15-PM.png?resize=300%2C266&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-6.16.15-PM.png?resize=150%2C133&amp;ssl=1 150w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-6.16.15-PM.png?w=714&amp;ssl=1 714w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\n<\/div>\n\n\n<p>In the <strong>index.html<\/strong> file place the code <\/p>\n\n\n\n<pre title=\"index.html\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Webpack Config&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;script src=\"bundle.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>In the <strong>index.js <\/strong>file place the code <\/p>\n\n\n\n<pre title=\"index.js\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">console.log('Hi from Webpack');<\/code><\/pre>\n\n\n\n<p>So if we want to use an index.js file then we need to create a bundle of index.js. For creating a bundle we need the <strong>webpack.config<\/strong>. Therefore, let&#8217;s create it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4_%E2%80%93_Create_a_webpackconfigjs_file_in_the_root_folder\"><\/span><strong>Step 4 &#8211; Create a webpack.config.js file in the root folder<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>webpack.config.js<\/strong>: This is the configuration file that webpack is going to read in order to use all the things that we need for our project.<\/p>\n\n\n\n<pre title=\"webpack.config.js\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">const path = require('path');\nmodule.exports = {\n    entry:'.\/src\/index.js',\n    output:{\n        filename:'bundle.js',\n        path:path.resolve(__dirname, 'dist')\n    }\n}<\/code><\/pre>\n\n\n\n<p><br>Firstly, we need to do is create this path variable. This is going to help us to know where to check, that the files are located. So the first thing is going to be a module that exports. After that, an entry and the entry is &#8216;<strong>.\/src\/index.js<\/strong>&#8216;. Now, this is the entry point for React webpack. <\/p>\n\n\n\n<p>Therefore, this would be the main file and <strong>webpack.config<\/strong> is going to look for. So all of our applications and everything is going to come through this entry point. After that, it would make sense within the output point.<\/p>\n\n\n\n<p>Output is basically once. So our source code is going to be in this entry point. Where it&#8217;s going to pull this. In the web is going to do its magic that really we&#8217;re going to tell <strong>webpack.config<\/strong>. What to do and then we need to tell webpack once Here&#8217;s the output. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_5_%E2%80%93_Output_Bundlejs_File\"><\/span><strong>Step 5 &#8211; Output Bundle.js File<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Firstly, we need a filename. Once we&#8217;re done, we&#8217;re going to call it the <strong>bundle.js<\/strong>. You can call it anything you want. But that&#8217;s kind of like standard.<\/p>\n\n\n\n<p>Here, basically what this is saying is, here&#8217;s my entry point. When you&#8217;re done, you&#8217;re going to rename the file <strong>bundle.js<\/strong>. Where you put it into the dist folder. Once done, run the command <strong>npm run build<\/strong>. This will create the <strong>bundle.js <\/strong> file inside the <strong>dist<\/strong> folder.<\/p>\n\n\n\n<p>Now <strong>bundle.js file <\/strong>has the access to <strong>index.js<\/strong> file. Once the bundle is created open the <strong>index.html<\/strong> file in the browser. We will see the message in the console <strong>Hi from Webpack<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"511\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-11.14.01-PM.png?resize=1024%2C511&#038;ssl=1\" alt=\"\" class=\"wp-image-10146\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-11.14.01-PM.png?resize=1024%2C511&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-11.14.01-PM.png?resize=300%2C150&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-11.14.01-PM.png?resize=768%2C383&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-11.14.01-PM.png?resize=150%2C75&amp;ssl=1 150w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-03-at-11.14.01-PM.png?w=1226&amp;ssl=1 1226w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p> So that&#8217;s simple, We just created our first Webpack bundle.<\/p>\n\n\n\n<p class=\"recommended-link\">Recommended: <a href=\"https:\/\/programmingfields.com\/how-to-use-routing-in-react-js-using-react-router-v6\/\">How to Use Routing in React JS Using React Router V6<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Loaders_in_webpack\"><\/span><strong>Loaders in webpack<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In <strong>webpack<\/strong>, loaders are a fundamental concept that allows you to preprocess files as they are bundled together in your application. Loaders transform files from one format or type into another. This transformation can include tasks like transpiling JavaScript from newer versions to older versions, compiling SASS or LESS into CSS, or even optimizing and compressing image files.<\/p>\n\n\n\n<p> Loaders are applied to specific files or sets of files in your project, depending on the rules you define in your Webpack config.<\/p>\n\n\n\n<p><strong>Installation<\/strong>: To use loaders in Webpack, you first need to install the necessary loaders using npm or yarn. Add the below command.<\/p>\n\n\n\n<pre title=\"install the command\" class=\"wp-block-code\"><code lang=\"visual-basic\" class=\"language-visual-basic\">npm add -D style-loader css-loader<\/code><\/pre>\n\n\n\n<p>Now we need to update the <strong>webpack.config.js<\/strong> <\/p>\n\n\n\n<pre title=\"webpack.config.js\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">const path = require('path');\nmodule.exports = {\n    entry:'.\/src\/index.js',\n    output:{\n        filename:'bundle.js',\n        path:path.resolve(__dirname, 'dist')\n    },\n    module:{\n        rules:[\n            {\n                test: \/\\.css$\/,\n                use:[\n                    'style-loader',\n                    'css-loader'\n                ]\n            }\n        ]\n    }\n}<\/code><\/pre>\n\n\n\n<p>Inside the <strong>src<\/strong> create a <strong>css<\/strong> folder and create <strong>main.css <\/strong>inside it. Here, you can write some styling inside <strong>main.css<\/strong>.<\/p>\n\n\n\n<pre title=\"main.css\" class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">body{\n    background:green;\n}<\/code><\/pre>\n\n\n\n<p>Now, import this CSS file inside the index.js file. This will change the background color of the webpage.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"454\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-2.44.59-PM.png?resize=1024%2C454&#038;ssl=1\" alt=\"\" class=\"wp-image-10261\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-2.44.59-PM.png?resize=1024%2C454&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-2.44.59-PM.png?resize=300%2C133&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-2.44.59-PM.png?resize=768%2C341&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-2.44.59-PM.png?resize=1536%2C681&amp;ssl=1 1536w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-2.44.59-PM.png?resize=150%2C67&amp;ssl=1 150w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-2.44.59-PM.png?w=1646&amp;ssl=1 1646w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Setup_Sass_in_webpackconfigjs\"><\/span>Setup Sass in webpack.config.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For the setup of sass, we need a sass loader and node-sass. Run the below command in the terminal.<\/p>\n\n\n\n<pre title=\"install the command\" class=\"wp-block-code\"><code class=\"\">npm add -D sass-loader node-sass<\/code><\/pre>\n\n\n\n<p>After installing Sass we will write a test in the webpack.config.js file.<\/p>\n\n\n\n<pre title=\"webpack.config.js\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">const path = require('path');\nmodule.exports = {\n    entry:'.\/src\/index.js',\n    output:{\n        filename:'bundle.js',\n        path:path.resolve(__dirname, 'dist')\n    },\n    module:{\n        rules:[\n            {\n                test: \/\\.css$\/,\n                use:[\n                    'style-loader',\n                    'css-loader'\n                ]\n            },\n            {\n                test:\/\\.scss$\/,\n                use:[\n                    {loader:'style-loader'},\n                    {loader:'css-loader'},\n                    {loader:'sass-loader'}\n                ]\n            }\n        ]\n    }\n}<\/code><\/pre>\n\n\n\n<p>Create a new folder scss inside the src folder. After that import the folder inside the <strong>index.js<\/strong>.<\/p>\n\n\n\n<pre title=\"index.js\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\/\/ import '.\/css\/main.css';\n import '.\/scss\/main.scss';\n\nconsole.log('Hi from Webpack');<\/code><\/pre>\n\n\n\n<p>Write style for sass inside the <strong>main.scss<\/strong> file.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">$blue : orange;\n body {\n    background: $blue;\n}<\/code><\/pre>\n\n\n\n<p>Now run the command npm run build. This will change the background color.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"440\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.05.50-PM.png?resize=1024%2C440&#038;ssl=1\" alt=\"\" class=\"wp-image-10265\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.05.50-PM.png?resize=1024%2C440&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.05.50-PM.png?resize=300%2C129&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.05.50-PM.png?resize=768%2C330&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.05.50-PM.png?resize=1536%2C660&amp;ssl=1 1536w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.05.50-PM.png?resize=150%2C64&amp;ssl=1 150w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.05.50-PM.png?w=1698&amp;ssl=1 1698w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>So, we are injecting a sass file in the javascript.<\/p>\n\n\n\n<p class=\"recommended-link\">Recommended: <a href=\"https:\/\/programmingfields.com\/use-redux-react-redux-in-react-js-with-example\/\">How to use Redux, React Redux in React JS with Example<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Add_Babel_for_Using_the_Latest_Javascript_Version\"><\/span><strong>Add Babel for Using the Latest Javascript Version<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In order to add Babel you will have to run the below command.<\/p>\n\n\n\n<pre title=\"install the command\" class=\"wp-block-code\"><code class=\"\">npm add -D babel-loader babel-core<\/code><\/pre>\n\n\n\n<p>This command will install the babel-loader. Now give the new object to the React <strong>webpack.config.js <\/strong>file.<\/p>\n\n\n\n<pre title=\"webpack.config.js\" class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">const path = require('path');\nmodule.exports = {\n    entry:'.\/src\/index.js',\n    output:{\n        filename:'bundle.js',\n        path:path.resolve(__dirname, 'dist')\n    },\n    module:{\n        rules:[\n            {\n                test: \/\\.css$\/,\n                use:[\n                    'style-loader',\n                    'css-loader'\n                ]\n            },\n            {\n                test:\/\\.scss$\/,\n                use:[\n                    {loader:'style-loader'},\n                    {loader:'css-loader'},\n                    {loader:'sass-loader'}\n                ]\n            },\n            {\n                test:\/\\.js$\/,\n                exclude:\/node_modules\/,\n                loader:'babel-loader'\n            }\n        ]\n    }\n}<\/code><\/pre>\n\n\n\n<p>We will exclude the <strong>node_modules<\/strong>  to be processed. But, here we only want our files to be processed.<\/p>\n\n\n\n<p>We will also have to create a <strong>babelrc<\/strong> file. This is going to allow configure the types of things that you want available to Bable. For this install below command<\/p>\n\n\n\n<pre title=\"install the command\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">npm add -D babel-preset-env<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"491\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.44.36-PM.png?resize=1024%2C491&#038;ssl=1\" alt=\".babelrc\" class=\"wp-image-10266\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.44.36-PM.png?resize=1024%2C491&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.44.36-PM.png?resize=300%2C144&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.44.36-PM.png?resize=768%2C368&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.44.36-PM.png?resize=150%2C72&amp;ssl=1 150w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.44.36-PM.png?w=1526&amp;ssl=1 1526w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>Add the JS folder inside the src folder. And create a module.js file.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.56.04-PM.png?resize=840%2C411&#038;ssl=1\" alt=\"module.js\" class=\"wp-image-10268\" style=\"width:840px;height:411px\" width=\"840\" height=\"411\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.56.04-PM.png?resize=1024%2C501&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.56.04-PM.png?resize=300%2C147&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.56.04-PM.png?resize=768%2C375&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.56.04-PM.png?resize=150%2C73&amp;ssl=1 150w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.56.04-PM.png?w=1526&amp;ssl=1 1526w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<p>Import the module.js file inside index.js<\/p>\n\n\n\n<pre title=\"module.js\" class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import{ welcome, hello } from '.\/js\/module';\nwelcome();\nhello();<\/code><\/pre>\n\n\n\n<p>Now run the command npm run build and check the output in the console.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.53.26-PM-2.png?resize=840%2C403&#038;ssl=1\" alt=\"Output\" class=\"wp-image-10273\" style=\"width:840px;height:403px\" width=\"840\" height=\"403\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.53.26-PM-2.png?resize=1024%2C491&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.53.26-PM-2.png?resize=300%2C144&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.53.26-PM-2.png?resize=768%2C368&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.53.26-PM-2.png?resize=150%2C72&amp;ssl=1 150w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-3.53.26-PM-2.png?w=1526&amp;ssl=1 1526w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<p>Now we got the message from the module.js file and we are able to use ES6. <\/p>\n\n\n\n<p>There are lots of loaders that can be used according to your needs. Now you can easily set up your React webpack file. <\/p>\n\n\n\n<p class=\"recommended-link\">Recommended: <a href=\"https:\/\/programmingfields.com\/how-to-install-and-setup-redux-in-react-js-step-by-step\/\">How to Install and Setup Redux in React JS Step By Step<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Save_Webpack_Automatically_%E2%80%93_Watch\"><\/span><strong>Save Webpack Automatically &#8211; Watch<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We have seen whenever there is a change in the files, we have to write the npm run build command. So this is kind of annoying. So here I will show you that we can save the files automatically and we do not need to run the command in every single change.<\/p>\n\n\n\n<p>React webpack has a feature called a <strong>watch<\/strong>. You can add it to the <strong>package.json<\/strong> file. It is called a flag. And this way it&#8217;s going to watch our files every time we save. It&#8217;s just going to automatically run and bundle things together. We&#8217;re going to create a new script.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"429\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-4.32.41-PM.png?resize=1024%2C429&#038;ssl=1\" alt=\"webpack.config\" class=\"wp-image-10278\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-4.32.41-PM.png?resize=1024%2C429&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-4.32.41-PM.png?resize=300%2C126&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-4.32.41-PM.png?resize=768%2C322&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-4.32.41-PM.png?resize=150%2C63&amp;ssl=1 150w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-10-at-4.32.41-PM.png?w=1526&amp;ssl=1 1526w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>And now run the command  <strong>npm run watch<\/strong><\/p>\n\n\n\n<p>Every time you&#8217;re making a change, React webpack will just sit there and watch. We can have it automatically reload our browser so that every time it&#8217;s going to watch it sees that change. It&#8217;s going to automatically refresh, and that&#8217;s just going to make our development lives a whole lot easier. I am attaching my GitHub link to download the source code.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/github.com\/BuntyKumari\/React-template\" target=\"_blank\" rel=\"noopener\">Download File<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Webpack 2 is a powerful and versatile build tool that has become an integral part of modern web development. Its features, performance improvements, and enhanced configuration make it a valuable asset for building efficient and optimized web applications. If you&#8217;re not already using Webpack 2, now is the time to dive in and explore how it can streamline your development process and deliver better-performing web apps. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Webpack tool is a very popular tool these days. As a web developer. I think it is an important skill to know about React Webpack. How to read and understand documentation. When you are learning React or you are just a beginner. You create an App using create-react-app. But this method abstracts away the [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":10292,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1369],"tags":[2828,2836,2830,2832,2837,2825,2834,2838,2823],"yst_prominent_words":[116],"class_list":{"0":"post-10136","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"tag-babel-rc","9":"tag-css-loader-in-webpack","10":"tag-eslint-in-react","11":"tag-npm-watch","12":"tag-react-template","13":"tag-webpack","14":"tag-webpack-configuration","15":"tag-webpack-configuration-in-react","16":"tag-webpack-in-react","17":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2023\/09\/How-to-setup-webpack-in-react.png?fit=560%2C315&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/10136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/comments?post=10136"}],"version-history":[{"count":23,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/10136\/revisions"}],"predecessor-version":[{"id":11382,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/10136\/revisions\/11382"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/10292"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=10136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=10136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=10136"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=10136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}