How to just copy the index.html to the dist folder using webpack

When building a project with Webpack, it's common to copy static files such as index.html from the source directory to the output dist directory. To accomplish this, we can utilize the html-webpack-plugin plugin, which not only copies the index.html file but also automatically injects the bundled JavaScript files into the HTML file.

Here are the steps to use this plugin:

1. Install the plugin: First, install the html-webpack-plugin. This can be done using npm or yarn:

   bash
   npm install --save-dev html-webpack-plugin

2. Configure Webpack: In the Webpack configuration file (typically webpack.config.js), import the plugin and add a new HtmlWebpackPlugin instance to the plugins array. You can specify configuration options in the constructor, such as the path to the template file (template):

   javascript
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   
   module.exports = {
     // Other configurations...
     plugins: [
       new HtmlWebpackPlugin({
         template: './src/index.html' // Path to your original HTML file
       })
     ]
     // Other configurations...
   };

3. Customize Configuration: HtmlWebpackPlugin provides many optional configuration options, such as filename to specify the output HTML filename (default is index.html). If you want to change the output filename or path, you can modify this option:

   javascript
   new HtmlWebpackPlugin({
     template: './src/index.html',
     filename: 'dist/index.html' // Output HTML file path
   })

In this manner, during the Webpack build process, the specified index.html is automatically copied to the dist directory, and the bundled JavaScript files are injected into the HTML file. This eliminates the need to manually edit the index.html file to include the built resources.

This method not only improves development efficiency but also avoids the issue of forgetting to update the HTML file references when modifying JavaScript files.