https://github.com/AbePlays/react-webpack-mastery/commit/4883bb1d61acb1f2745ab2734622c1f13b1f40fc

Begin by copying the provided starter files located in the src directory to get started with the project.

This application aims to provide a straightforward solution for users to input two numbers and calculate their sum. A simple drop-in css is added to make the content look good on most displays. The JavaScript code handles the addition of the two numbers. Finally, the CSS and JavaScript files are linked to the HTML document by including the appropriate file references within the head section. Open the HTML file, perform the addition operation, and voila! The application should function successfully.

⚠️ Problems with this setup

The current setup described above has a few limitations and challenges. Let's discuss them and see how Webpack can improve the overall development process:

  1. Manual File Management: In the existing setup, you need to manually manage the linking of CSS and JavaScript files to the HTML document. As the project grows larger and more complex, keeping track of dependencies and ensuring proper file inclusion becomes cumbersome.
  2. Dependency Management: If your project requires external dependencies, you would need to manually download and include them in your project. This process can be time-consuming and error-prone, especially when dealing with multiple dependencies and their interdependencies.
  3. Limited Scalability: As the project grows, maintaining a large number of separate CSS and JavaScript files can become challenging. This approach may result in slower load times as each file requires a separate HTTP request.
  4. Code Optimization: Without any build process, the JavaScript and CSS files are not optimized for production. This can lead to larger file sizes, slower loading times, and decreased performance.

Webpack addresses these problems and provides several benefits:

  1. Module Bundling: webpack allows you to bundle all your project's assets, including CSS, JavaScript, and even other file types, into a single bundle. It intelligently resolves dependencies between modules, reducing the need for manual file management.
  2. Dependency Management: webpack simplifies the management of external dependencies by providing a convenient way to install, import, and use them in your project. It handles the resolution and inclusion of dependencies, making it easier to add and update external libraries.
  3. Code Splitting: webpack enables code splitting, allowing you to divide your application code into smaller chunks. This facilitates lazy loading and improves performance by loading only the required code for specific pages or features.
  4. Asset Optimization: webpack offers a range of plugins and loaders to optimize your assets. It can minify and compress your JavaScript and CSS files, remove unused code, and optimize images for better performance.
  5. Development Server: webpack includes a built-in development server that provides live reloading, allowing you to see immediate changes as you develop. This speeds up the development process and eliminates the need for manual page refreshing.

Let's utilize webpack to bundle our files, eliminating the need to manually handle the import of files into our HTML. By doing so, we can focus more on developing our project.

To get started, we need to remove the script and CSS link tags from our HTML file since webpack will handle their inclusion for us. We achieve this by configuring webpack to generate the HTML and JavaScript files and establish the necessary connections between them automatically. This task is accomplished using webpack plugins since the default webpack configuration lacks this capability.

<aside> 📦 webpack plugins are powerful tools that extend the functionality of webpack by performing specific tasks during the bundling process. They enhance the build pipeline, optimize assets, provide additional features, and automate various tasks. Here are some key points about webpack plugins:

</aside>

The HtmlWebpackPlugin is a powerful plugin for webpack that simplifies the process of generating HTML files and automatically injecting bundled JavaScript and CSS files into them. It eliminates the need to manually manage HTML file configurations and script tags. To use the HtmlWebpackPlugin, follow these steps:

  1. Open the terminal or command prompt and navigate to the project directory. Run the following command to install the html-webpack-plugin as a development dependency:

    pnpm add -D html-webpack-plugin