My goal is to include the babel/polyfill with the index.js files using webpack. After completing the setup, I tried running "npm run dev" in the command prompt but encountered an error. The initial line of the error message said "ERROR in ./src/js/index.js". I am currently working on JavaScript (ES6).
Below is my webpack.config.js file.
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"
}
}
]
}
};
Next, here is my .babelrc file.
{
"presets": [
["@babel/env", {
"targets": {
"browsers": [
"last 5 versions",
"ie >= 8"
]
}
}]
]
}
Finally, here is my package.json file.
{
"name": "forkify",
"version": "1.0.0",
"description": "forkify project",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"author": "AGO McAGO",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.10.1",
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-preset-env": "^1.7.0",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"babel-polyfill": "^6.26.0"
}
}
The full error log from the Windows 10 command prompt is displayed below.
> webpack --mode development
(Complete error log provided)