Entrypoint undefined = index.html using HtmlWebpackPlugin

Question

I'm using Webpack 4 and I'm creating the config file, when trying to use the HtmlWebpackPlugin it got this on the console: Entrypoint undefined = index.html, it opens the browser and the HTML does appear but I'm getting this weird message on the console, how to solve this?

That is how my config file looks like:

'use strict'

const webpack = require('webpack')
const { join, resolve } = require('path')

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

module.exports = {
  mode: 'development', // dev
  devtool: 'cheap-module-eval-source-map', // dev
  entry: join(__dirname, 'src', 'index.js'),
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  devServer: {
    contentBase: resolve(__dirname, 'build')
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({
      template: join(__dirname, 'public', 'index.html')
    }),

    new webpack.HotModuleReplacementPlugin(), // dev
    new webpack.NoEmitOnErrorsPlugin() // dev
  ]
}

show your directory structure where is your index.js? and where is your index.html ? This would be helpful in debugging the issue — Sakhi Mansoor, Aug 25 '18 at 12:28
The `index.js` is inside the `src` folder. The `index.html` is inside the `public` folder. There's nothing more than that. The `Webpack` config is in the root folder and the `.babelrc` with `{ "presets": ["env", "react"] }`. — xahovuzu, Aug 25 '18 at 19:12

score 7 · Answer 1 · edited Apr 11 '19 at 21:28

7

Try this; you might be making wrong template path :

 new HtmlWebpackPlugin({
        template: resolve(__dirname, 'src/public', 'index.html'),
        filename: './index.html'
      }),

If public is in src folder this should work It's my assumption. Let me know if the issue still persists.

edited Apr 11 '19 at 21:28

codejockie

9,020
4
40
46

answered Aug 25 '18 at 19:21

Sakhi Mansoor

7,832
5
22
37

17

You got that wrong, the `src` is where the components are at, the `public` is where the static files are like the `index.html`. I noticed that this message appears only on the `webpack-dev-server` and not only for me but for a lot of people including the tutorials on Youtube, it seems to be harmeless and I could get rid of that by using `stats: { children: false }` – xahovuzu Aug 25 '18 at 22:44
Glad to hear this. Finally it is fixed. – Sakhi Mansoor Aug 25 '18 at 22:45
@xahovuzu how did you fix it? Please post an answer. Thanks! – Agent Zebra Mar 19 '19 at 05:44
@xahovuzu Did you ever resolve this? It's been bugging me forever and I can't find a fix anywhere. – Sir Robert Apr 03 '19 at 19:39
1

@xahovuzu this does not only happen on web dev server, It happens for me when i run webpack --mode production – StefanBob Apr 26 '19 at 19:56
this is still broken for me. does anyone know how to fix it? The error is not harmless - I can't find the generated file anywhere (it doesn't seem to make one). – Cesar Jun 02 '19 at 14:17
Using stats is not a solution, `stats { chidden: false }` because this only hide plugins info. read about it here [webpack stats](https://webpack.js.org/configuration/stats/) – wilo087 Jun 24 '19 at 16:17
I found some working solution. Check the answer below (https://stackoverflow.com/questions/52013133/entrypoint-undefined-index-html-using-htmlwebpackplugin/57123167#57123167). – AxeEffect Jul 20 '19 at 09:07

score 5 · Answer 2 · answered Feb 11 '20 at 01:29

5

According to the creators of HtmlWebpackPlugin it's just a meaningless log message and an ignorable cosmetic issue. See this comment on the issue.

answered Feb 11 '20 at 01:29

simlist

159
2
4

AxeEffect · Answer 3 · 2019-07-20T09:05:54.860

It seems like a problem with the extension of the template firing an unwanted loader. If the extension of the template is changed to any other the plugin will work.

If you're using the default webpack template system (EJS, as of webpack 4) it makes sense to use ejs because the template isn't valid html anymore:

new HtmlWebpackPlugin({
    // it works without 'path.resolve()'. No need for 'filename', defaults to 'index.html'
    template: "./public/index.ejs",
}),

webpack considers by default that the template is EJS and will automatically process it with the proper loader. If you use any other template system you will have to add the corresponding loader. More info on official documentation.

This didn't get rid of the undefined message for me. – Mark Edington Dec 04 '19 at 18:13 — Mark Edington, Dec 04 '19 at 18:13

score 0 · Answer 4 · answered May 26 '21 at 08:45

0

plugins: [
      ...
      new HtmlWebPackPlugin({
        title: '...',
        template: path.resolve(folderSrc, 'index.html'),
        filename: 'index.html',
        hash: true
      })
    ]

answered May 26 '21 at 08:45

Mohammad Ayoub Khan

2,422
19
24

score 0 · Answer 5 · answered Jul 18 '21 at 06:19

Error got fixed in mine by adding this in webpack.config.js :

    stats: { children: false }, //to fix the error-Entrypoint undefined=index.html  
      plugins:[  
          new HtmlWebpackPlugin({  
             template: './index.html'  
          })  
      ]

Entrypoint undefined = index.html using HtmlWebpackPlugin

5 Answers5

Linked