title: Webpack - npm run start and build doesn't work?
body: <p>I am used to create react projects using <strong>create-react-app</strong> but i decided to create one without it but i am stuck in <strong>webpack</strong> configuration as i am new to it:</p>
  <p>This is my <strong>package.json</strong> file:</p>
  <pre><code>{
    &quot;name&quot;: &quot;package.json&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;Demo&quot;,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;webpack-dev-server --mode development --open --hot&quot;,
      &quot;build&quot;: &quot;webpack --mode production&quot;
    },
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;MIT&quot;,
    &quot;dependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.12.3&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.12.1&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.12.1&quot;,
      &quot;babel-loader&quot;: &quot;^8.1.0&quot;,
      &quot;css-loader&quot;: &quot;^5.0.0&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^4.5.0&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;,
      &quot;server&quot;: &quot;^1.0.30&quot;,
      &quot;style-loader&quot;: &quot;^2.0.0&quot;,
      &quot;webpack&quot;: &quot;^5.2.0&quot;,
      &quot;webpack-cli&quot;: &quot;^4.1.0&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.11.0&quot;
    }
  }
  
  </code></pre>
  <p><strong>webpack.config.js file:</strong></p>
  <pre><code>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'})
      ]
  }
  </code></pre>
  <p><strong>.babelrc.json file:</strong></p>
  <pre><code>{
      &quot;presets&quot;: [&quot;@babel/preset-env&quot;,&quot;@babel/preset-react&quot;]
  }
  </code></pre>
  <p>this is my whole project folders and files tree:</p>
  <p><a href="https://i.stack.imgur.com/JU360.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JU360.png" alt="enter image description here" /></a></p>
  <p>When i run <code>npm run start</code> or <code>npm run build</code>, it fails:</p>
  <p>with <code>npm run start</code>, i get this error:</p>
  <pre><code>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.&lt;anonymous&gt; (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',
  </code></pre>
  <p>With <code>npm run build</code>:</p>
  <pre><code>[webpack-cli] ReferenceError: index is not defined
  </code></pre>
  <p>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??</p>