HTML Webpack Plugin生成index.html异常：冗余哈希文件生成问题咨询

Hey there, let's troubleshoot why you're getting both a correctly hashed HTML file and a broken index.html with just the hash filename and bundle script. This is usually a configuration issue with how you've set up the plugin or your output settings.

Common Causes & Fixes #

1. You've Got Multiple HtmlWebpackPlugin Instances #

Double-check your webpack.config.js—if you're calling new HtmlWebpackPlugin() more than once in the plugins array, it will generate multiple HTML files. One might be correctly using your template, while the other is falling back to a default (or broken) setup.

2. Your Template Path Is Pointing to the Wrong File #

If you accidentally set template to the hashed HTML file from a previous build (instead of your source index.html), the plugin will just copy that file's content into a new index.html—resulting in the weird output you're seeing.

3. Missing output.clean to Clear Old Files #

Without output.clean: true, old hashed files from previous builds stick around in the dist folder. If your template path is ever misconfigured temporarily, those old files can cause unexpected behavior.

Correct Configuration Example #

First, let's make sure your source index.html (the template) has the React root div:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My React App</title>
</head>
<body>
    <!-- React mount point -->
    <div id="root"></div>
</body>
</html>

Now update your webpack.config.js to fix the plugin setup:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js', // Your React entry file
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash].js', // Optional: add hash for cache busting
    clean: true, // Critical: clears dist folder on every build
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html', // Point to YOUR source template file
      filename: 'index.html', // Explicitly set the output filename (default is index.html)
      inject: 'body', // Automatically adds bundle script to the end of <body>
    }),
  ],
  // Add your React loader config here (babel-loader, etc.)
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

Step-by-Step Verification #

1. Delete the entire dist folder to get rid of any old, conflicting files.
2. Run your build command (e.g., npm run build).
3. Check the dist folder—you should only see index.html and your bundle file (with or without hash).
4. Open index.html—it should match your source template, have the #root div, and include the script tag for your bundle.

If you're still seeing issues, check for other plugins (like CopyWebpackPlugin) that might be copying extra files into dist, or make sure your source index.html doesn't have any syntax errors that could break the plugin's parsing.

内容的提问来源于stack exchange，提问作者Jaro