webpack in production loads old cached less files instead of new server less

Question

I am uploading my ReactJS/less/webpack site to the remote server for the first time, but the only problem is that webpack in production seems to be caching an old version of my less styles. I can definitely see in the cPanel file directory that the less files in "public_html" are current (pulled from my github), but when I actually hit the page myself and inspect element directly, the style/code is clearly an outdated version, coming from sources like "webpack://Navbar.less". My local prod is perfectly fine, always current.

I have tried clearing my cache, doing a hard CTRL+SHIFT+R refresh, multiple browsers, etc, nothing has worked.

Am I missing a webpack config? Do I need to implement hashing/cache busting or something? I tried adding "hash: true" in the "HtmlWebpackPlugin" object, but no change. Please help.

//webpack.common.js

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

module.exports = {
   entry: './main.js',
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
               presets: ['@babel/preset-env', '@babel/preset-react']
            }
         },
         {
           test: /\.less$/,
              use: [
                {
                  loader: 'style-loader',
                },
                {
                  loader: 'css-loader',
                },
                {
                 loader: 'resolve-url-loader',
               },
                {
                  loader: 'less-loader',
                  options: {
                    lessOptions: {
                      strictMath: true,
                    },
                  },
                },
              ],
         },
         {
           test: /.*\.(gif|png|jpe?g|svg)$/i,
           use: [
             {
               loader: 'file-loader',
               options: {
                 name: '[name].[ext]',
                outputPath: 'static/assets/',
                publicPath: 'prod/static/assets/',
                 emitFile: true,
                 byPassOnDebug: true,
                 disable: true
               }
             },
             {
              loader: 'image-webpack-loader',
              options: {
                mozjpeg: {
                  progressive: true,
                },
                // optipng.enabled: false will disable optipng
                optipng: {
                  enabled: false,
                },
                pngquant: {
                  quality: [0.65, 0.90],
                  speed: 4
                },
                gifsicle: {
                  interlaced: false,
                },
                // the webp option will enable WEBP
                webp: {
                  quality: 75
                }
              }
            }
           ]
         }
          
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html',
         hash: true
      }),
      new webpack.DefinePlugin({
        PICS_DIR: JSON.stringify('../www/img/pics/')
      })
   ]
}

webpack.production.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');

module.exports = merge(common, {
    mode: 'production',
    output: {
      path: path.join(__dirname, '/prod'),
      filename: 'index.js'
   },
});

Answer 1

It was an issue with how I was using the "File Manager" in my web server. My style updates are working now.