Webpack - npm run start and build doesn't work?

Question

I am used to create react projects using create-react-app but i decided to create one without it but i am stuck in webpack configuration as i am new to it:

This is my package.json file:

{
  "name": "package.json",
  "version": "1.0.0",
  "description": "Demo",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "babel-loader": "^8.1.0",
    "css-loader": "^5.0.0",
    "html-webpack-plugin": "^4.5.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "server": "^1.0.30",
    "style-loader": "^2.0.0",
    "webpack": "^5.2.0",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.config.js file:

const path = require('path');
const HTMLplugin = require('html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


const rules = [
    {
        test: /\.js$/,
        exclude: /node-modules/,
        use: {
            loader: 'babel-loader'
        }
    },
    {
        test: /\.css$/,
        exclude: /node-modules/,
        use: ['style-loader', 'css-loader']
    }
]

module.exports = {
    entry: path.join(__dirname, 'src', index.js),
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '/build')
    },
    module: {rules},
    plugins: [
        new HtmlWebpackPlugin({template: './public/index.html'})
    ]
}

.babelrc.json file:

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

this is my whole project folders and files tree:

When i run npm run start or npm run build , it fails:

with npm run start , i get this error:

internal/modules/cjs/loader.js:968
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- C:\Users\saher\Desktop\New folder\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (C:\Users\saher\Desktop\New folder\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'MODULE_NOT_FOUND',

With npm run build :

[webpack-cli] ReferenceError: index is not defined

I am new to webpack and i can't figure out where the problem is, i think i have installed all files and configurations required to make it work, so where is the problem exactly??

Answer 1

I think the problem is, you wrote index without string quotes.

entry: path.join(__dirname, 'src', index.js)

This should be

entry: path.join(__dirname, 'src', 'index.js')

It is like a variable when you write without string quotes. You can try the same this on console.log.

Because index is not defined.

Answer 2

There is an open bug report stating webpack-server 3.11 is not compatible with with webpack-cli v4.

The report can be found here: Issue 2759

Yes - webpack-dev-server does not work with webpack-cli v4

Link to comment: https://github.com/webpack/webpack-dev-server/issues/2759#issuecomment-706668920

The solution is to revamp your project.json file by changing to compatible versions (and welcome to Webpack:-) )

Answer 3

"main": "index.js" in package.json should be "main": "src/index.js"