Problems with webpack-dev-server React

Question

I am reading an article about Webpack the moment has come when I have to start Webpack but I get an error

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\suren\AppData\Roaming\npm-cache\_logs\2021-01-04T07_14_10_733Z-debug.log

Here are also screenshots:

package.json

{
  "name": "cra-tutorial",
  "version": "1.0.0",
  "description": "link tutorial ",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode=development --open --hot",
    "build": "webpack --mode=production"
  },
  "author": "Suren Zakaryan",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.1"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  }
}

Answer 1

Your screenshot says there is an issue parsing your HelloWorld module since there is no appropriate loader. You need to install Babel to transpile ES2015 javascript, and Webpack to bundle your assets.

1. npm install --save-dev @babel/preset-env
2. npm install --save-dev @babel/preset-react
3. Add .babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

4. Add webpack.config.js

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