CODEWITHSUNDEEP
webpackhtml-webpack-plugin
ZpfSysn
ZpfSysn

Reputation: 889

WebPack: Entrypoint underfined

I am doing one of the Tutorial of using React, WebPack and Babel together.

While everything worked as intended(built, compile, and render correctly).

I am getting an error from webpack, that said

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

My WebPack configuration file looks like following:

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

And My file structure looks like this:

WebPack_Demo
  -dist
  -node_modules
  -src
    -javascript
      -components
        -Component1.js
        -Component2.js
    -index.html
    -index.js
  -.babelrc
  - package-lock.json
  - webpack.config.js

Someone else is also getting the error following this tutorial but the author does not address that. Even though it does not affect the app, I still wanted to know how to get rid of this error.

Upvotes: 0

Views: 3535

Answers (1)

xeiton
xeiton

Reputation: 1840

I think you should add the "entry" and "output" properties to your webpack config file.

Your output should have a "path" pointing to a folder where the bundled files are stored.

Then the "filename" in HtmlWebpackPlugin should point to that folder

This is how is mine setup:

const path = require('path');

module.exports = {
  entry: {
    app: path.resolve(__dirname, '.','index.js')
  },
  output: {
    path: path.resolve(__dirname, '.', 'build'),   // ATTENTION
    publicPath: '/',
    filename: '[name].js'
  },
  devtool: 'source-map',
  plugins: [
    new HtmlWebpackPlugin({
       template: path.resolve('.', 'src', 'index.html'),
       chunks: [chunks],
       filename: path.join('.', 'build', 'index.html'),  // ATTENTION
    }),
    ....
  ],
  ....
}

Upvotes: 1

Related Questions