title: Webpack config error - please help me correct
body: <p>Im on &quot;webpack&quot;: &quot;^5.64.1&quot;
  problem:
  [webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.</p>
  <ul>
  <li>configuration.module.rules[2] should be one of these:
  [&quot;...&quot; | object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }, ...]
  -&gt; A rule.
  Details:
  <ul>
  <li>configuration.module.rules[2].loader should be a non-empty string.
  -&gt; A loader request.</li>
  </ul>
  </li>
  </ul>
  <p>(common.js)</p>
  <pre><code>const path = require('path').resolve;
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
      entry: {
          index: path(__dirname, '..', 'src', 'index.js'),
      },
      output:{
          filename: '[name].[contenthash:6].js',
          path: path(__dirname, '..', 'build'),
      },
      resolve: {
          extensions: ['.js','.jsx'],
      },
      module: {
          rules: [
              {
                  test: /\.(js|jsx)$/,
                  exclude: /node_modules/,
                  use: {
                      loader: &quot;babel-loader&quot;,
                  }
              }
          ]
      },
      plugins:[
          new HtmlWebpackPlugin ({
              template: path(__dirname, &quot;..&quot;,&quot;public&quot;,&quot;index.html&quot;),
          })
      ]
  }
  </code></pre>
  <p>production.js</p>
  <pre><code>const path = require('path').resolve;
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
      entry: {
          index: path(__dirname, '..', 'src', 'index.js'),
      },
      output:{
          filename: '[name].[contenthash:6].js',
          path: path(__dirname, '..', 'build'),
      },
      resolve: {
          extensions: ['.js','.jsx'],
      },
      module: {
          rules: [
              {
                  test: /\.(js|jsx)$/,
                  exclude: /node_modules/,
                  use: {
                      loader: &quot;babel-loader&quot;,
                  }
              }
          ]
      },
      plugins:[
          new HtmlWebpackPlugin ({
              template: path(__dirname, &quot;..&quot;,&quot;public&quot;,&quot;index.html&quot;),
          })
      ]
  }
  </code></pre>
  <p>development.js</p>
  <pre><code>    module.exports = {
      devServer: {
          contentBase: './public',
          port: 3000,
      },
      devtool: 'inline-source-map',
      module: {
          rules:[
              {
                  test:/\.module\.s(a|c)ss$/,
                use: [
                    'style-loader',
                      {
                          loader:'css-loader',
                          options:{
                              modules: {
                                  localIdentName: '[local]',
                              }
                          }
                      },
                      {
                          loader: 'sass-loader',
                          options: {
                              sourceMap: true,
                          }
                      }
                ]
          },
           {
               test: /\.(s(a|c)ss|css)$/,
               exclude: /\.module.(s(a|c)ss)$/,
               loader: [
                  'style-loader',
                  'css-loader',
                  {
                      loader: 'sass-loader',
                      options: {
                          sourceMap: true,
                      }
                  }
  
               ]
              },
          ],
      },
  };
  </code></pre>
  <p>webpack.config.js</p>
  <pre><code>   const {merge} = require('webpack-merge');
  
  const commonConfiguration = require('./webpack/common');
  
  module.exports = (_env, {mode})=&gt; {
    const properlyConfig = require(`./webpack/${mode}`);
    const mergedConfig = merge(commonConfiguration, properlyConfig);
  
    return mergedConfig;
  }
  </code></pre>