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
– Sakhi Mansoor, Commented Aug 25, 2018 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
– xahovuzu, Commented Aug 25, 2018 at 19:12

codejockie · Accepted Answer · 2019-04-11 21:28:38Z

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, 2019 at 21:28

codejockie

11.1k5 gold badges52 silver badges58 bronze badges

answered Aug 25, 2018 at 19:21

Sakhi Mansoor

8,1325 gold badges24 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

xahovuzu Over a year ago

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 }

Sakhi Mansoor Over a year ago

Glad to hear this. Finally it is fixed.

Agent Zebra Over a year ago

@xahovuzu how did you fix it? Please post an answer. Thanks!

Sir Robert Over a year ago

@xahovuzu Did you ever resolve this? It's been bugging me forever and I can't find a fix anywhere.

StefanBob Over a year ago

@xahovuzu this does not only happen on web dev server, It happens for me when i run webpack --mode production

|

simlist · Accepted Answer · 2020-02-11 01:29:31Z

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, 2020 at 1:29

simlist

1592 silver badges4 bronze badges

Comments

AxeEffect · Accepted Answer · 2019-07-20 09:05:54Z

0

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.

edited Jul 20, 2019 at 9:05

answered Jul 20, 2019 at 8:51

AxeEffect

7,7305 gold badges39 silver badges34 bronze badges

1 Comment

Mark Edington Over a year ago

This didn't get rid of the undefined message for me.

Mohammad Ayoub Khan · Accepted Answer · 2021-05-26 08:45:16Z

0

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

answered May 26, 2021 at 8:45

Mohammad Ayoub Khan

3,01022 silver badges26 bronze badges

Comments

Muskan Tripathi · Accepted Answer · 2021-07-18 06:19:28Z

0

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'  
          })  
      ]

answered Jul 18, 2021 at 6:19

Muskan Tripathi

233 bronze badges

Collectives™ on Stack Overflow

Entrypoint undefined = index.html using HtmlWebpackPlugin

5 Answers 5

8 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related