Webpack 5 does not inject react-code on div in index.html

Question

I'm building a project with react and webpack 5. When building, everything runs without errors, but no components are inserted into the parent div in the main index.html

my file webpack.config

module.exports = (env = {}) => {
    return {
        entry: ['./src/index.js'],
        output: {
            clean: true,
            publicPath: '/',
            path: path.resolve(__dirname, 'build'),
            filename: `bundle-${Number(new Date())}.js`,
        },
        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true,
                        },
                    },
                },
            ],
        },
        devServer: {
            hot: true,
            open: true,
            historyApiFallback: true,
            client: {
                overlay: true,
            },
        },
        plugins: [
            new HtmlWebpackPlugin({
                inject: true,
                scriptLoading: 'blocking',
                template: 'public/index.html',
                favicon: 'public/favicon.ico',
            }),
        ],
    }
}

my file package.json

{
  "name": "test",
  "license": "ISC",
  "scripts": {
    "start": "webpack-dev-server --mode=development",
  },
  }
}

Why can this be happening and how can I fix it?

Answer 1

Your plug-in doesn't seem to be working properly.

Please adjust the position of 'template'

If your index.html exists in public, apply the keyword below template: path.resolve(__dirname, 'public/index.html')