Webpack has been initialised using a configuration object that does not match the API schema. webpack install by "npm install webpack" - node.js

Question

I am learning on React-JS. I have written a simple project. But getting an error when I run "npm start" command.
My Webpack.config.js file is given below--
var webpack= require("webpack");
var path =require("path");
var DIST_DIR= path.resolve(__dirname,
"dist");
var SRC_DIR= path.resolve(__dirname,
"src");
var config={
entry: SRC_DIR + "/app/index.js",
output:{
path: DIST_DIR + "/app",
file: "bundle.js",
publicPath: "/app/"
},
module:{
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query:{
presets: ["react",
"es2015", "stage-2"]
}
}
]
}
};
module.exports=config;
package.json file --
{
"name": "basic-reactjs",
"version": "1.0.0",
"description": "Some Basic ReactJS",
"main": "index.js",
"scripts": {
"start": "npm run build",
"build": "webpack -d && cp
src/index.html dist/index.html
&& webpack-dev-server --content-
base src/ --inline --hot",
"build:prod": "webpack -p && cp
src/index.html dist/index.html"
},
"keywords": [
"reactjs"
],
"author": "Numery Zaber",
"license": "MIT",
"dependencies": {
"react": "^16.6.3",
"react-dom": "^16.6.3"
},
"devDependencies": {
"babel-loader": "^8.0.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
Webpack install by the follwoing command
npm install webpack webpack-dev-server babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 --save-dev
Please help me to solve the issue.

Answer 1

The schema in Webpack 4 is now changed.You have imported the loaders which was working in older version of webpack.
For more details : https://webpack.js.org/concepts/loaders/
var webpack= require("webpack");
var path =require("path");
var DIST_DIR= path.resolve(__dirname,
"dist");
var SRC_DIR= path.resolve(__dirname,
"src");
var config={
entry: SRC_DIR + "/app/index.js",
output:{
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ["react","es2015", "stage-2"],
},
}
}
]
}
};
module.exports=config;
You can also use #babel/preset-env.