webpack + babel无法正确捆绑js

Question

I am using webpack and babel in my project. While the webpack is wokring fine but babel is somehow not doing it's job in polyfilling the ES6+ features. When I use the npm script, I get some error "Entrypoint undefined = index.html" in the command prompt. Kindly help !

Package.json

{
  "name": "forkify",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "author": "neeraj",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.2",
    "babel-preset-env": "^1.7.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.19.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0"
  }
}

webpack.config.js

const path=require('path');
const HtmlWebPackPlugin=require('html-webpack-plugin');
module.exports={
    entry:['babel-polyfill','./src/js/index.js'],
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'js/bundle.js'
    },
    devServer:{
        contentBase:'./dist'
    },
    plugins:[
        new HtmlWebPackPlugin({
            filename:'index.html',
            template:'./src/index.html'
        })
    ],
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader'
                }
            }
        ]
    }

};

.bablerc

{
    "presets":[
        ["env",{
            "targets":{
                "browser":[
                    "last 5 versions",
                    "ie>=8"
                ]
            }
        }]
    ]
}

Error what I get:

Project Structure:

EDIT------------------ I started getting some new error now.

Answer 1

It is the html-webpack-plugin 's problem, a fix was introduced in 3.0.7 but was removed again in 3.0.8 . For more information, please click here .

So if you run npm install --save-dev html-webpack-plugin@3.0.7 , and then npm run dev will output Entrypoint html-webpack-plugin for "index.html" = index.html . And personally, it is a trivail problem not that important.

Answer 2

There was some dependency issue. Deleted my node_modules folder and used this command instead: npm install -D babel-loader@7 babel-core babel-preset-env webpack

Follow this link for more information : https://github.com/babel/babel-loader

Now I no longer get any error and also babel is working fine.

FYI....you might have to install babel-polyfill & html-webpack-plugin seperately.