'html-webpack-plugin Entrypoint undefined = index.html

I'm trying to set a webpack4 and React boilerplate, but facing issue rendering the index.html. For example, when I updated the title of the index.html and the index.html in /dist folder is not updated, and only title is rendered while nothing in index.js is rendered. Please help take a look with below details in my project.

package.json

{
  "name": "react-webpack-boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "redux-immutable-state-invariant": "1.2.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "bootstrap": "^4.1.1",
    "react": "^16.3.2",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.3.2",
    "react-redux": "^5.0.7",
    "react-router": "2.4.0",
    "react-router-redux": "4.0.4",
    "redux": "3.5.2",
    "redux-thunk": "2.0.1"
  }
}

webpack.config.js:

// state rules for babel loader

// This plugin will generate html files with scripts injected 
const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html"
});

module.exports = {
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader" // it will look for .babelrc
      }
    },
    {
      test: /\.html$/,
      use: [
        {
          loader: "html-loader"
        }
      ]
    },
    {
      test: /\.css$/,
     use: [
        {
          loader: "style-loader"
        },
        {
          loader: "css-loader",
          options: {
            modules: true,
            importLoaders: 1,
            localIdentName: "[name]_[local]_[hash:base64]",
            sourceMap: true,
            minimize: true
          }
        }
      ]
    },
    {
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: {
            loader: 'url-loader',
            options: {
            limit: 10000
            }
        }
    }
  ]
},
plugins: [htmlPlugin]
};

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React 2</title>
</head>
<body>
  <section id="index"></section>
</body>
</html>

index.js:

import React from "react";
import {ReactDOM} from 'react-dom';

console.log('loading index js');
const App = () => {
    return (
      <div>
        <h3>Our Application Is Alive</h3>
        <p>This isn’t reality. This — is fantasy.</p>
        <p>Yes I am quoting Star Trek I cant help it.</p>
      </div>
    );
  };

ReactDOM.render(<App />, document.getElementById('index'));

After build, the ./dist/index.html is not updated, see content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React and Webpack4</title>
</head>
<body>
  <section id="index"></section>
<script type="text/javascript" src="main.js"></script></body>
</html>

below are found in compilation message:

Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 
327 bytes {0} [built]

Solution 1:^[1]

The webpack config needs to have an entry and optional output (req for multiple entries). It doesn't know which entries need to be added to index.html.

As as example in the docs:

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

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist'
  }
}

It will add the index.js to your index.html file.

Solution 2:^[2]

As i just reported here https://github.com/jantimon/html-webpack-plugin/issues/1259 the property syntax is "fileName" and not "filename"

Solution 3:^[3]

This is a meaningless error in webpack 4, runing with an earlier version of webpack like 3.0.7 or ignoring the error with stats: { children: false, } will fix this https://github.com/jantimon/html-webpack-plugin/issues/895

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	BisonAVC
Solution 2	Damien Romito
Solution 3

'html-webpack-plugin Entrypoint undefined = index.html

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]