Pfthb

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.

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
 ),
 ....
 ],
 ....