Hot reloading of HTML files not working with reloadium (works fine with just webpack-dev-server and python manage.py runserver)

[antoineprobst]

Describe the bug*

I have a Django project that uses webpack to serve some frontend assets and for hotreloading js/css/html files. Hotreloading of HTML files work great when I run django normally. However, when I run the project using Pycharm addon of Reloadium, the hotreloading of HTML files doesn't work. The page refresh when I save, but the changes aren't displayed until I manually refresh the page.

Changes made to Python files, css files, js files still works great.

To Reproduce

Steps to reproduce the behavior:

• Set up a django project that uses webpack with hot-reloading enabled (I will have a hard time describing the process step by step... I can put the config files below if asked. I will put some bits that seem relevent.)
• Run django project using Reloadium addon

Expected behavior

When I change the content of my HTML file and save it while using Reloadium, the change should be displayed on my webpage.

Screenshots

None

Desktop or remote (please complete the following information):**

• OS: Windows
• OS version: 10
• M1 chip: No
• Reloadium package version: 1.4.0 (latest addon version)
• PyCharm plugin version: 1.4.0 (latest addon version)
• Editor: PyCharm
• Python Version: 3.11.8
• Python Architecture: 64bit
• Run mode: Run & Debug (both modes cause issue)

Additional context

Some extracts of my config files that may be relevant :

start command used in package.json :

"start": "npx webpack-dev-server --config webpack/webpack.config.dev.js"

webpack.config.common.js :

const Path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  entry: {
    base: Path.resolve(__dirname, '../src/scripts/base.js'),
    contact_form: Path.resolve(__dirname, '../src/scripts/contact_form.js'),
  },
  output: {
    path: Path.join(__dirname, '../build'),
    filename: 'js/[name].js',
    publicPath: '/static/',
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: false,//'vendors',//false,

    },
  },
  plugins: [
  new BundleTracker({
      //path: path.join(__dirname, 'frontend/'),
      filename: 'webpack-stats.json',
    }),
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [{ from: Path.resolve(__dirname, '../public'), to: 'public' }],
    }),
    /*new HtmlWebpackPlugin({
      template: Path.resolve(__dirname, '../src/index.html'),
      //inject: false,
    }),*/
  ],
  resolve: {
    alias: {
      '~': Path.resolve(__dirname, '../src'),
    },
  },
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      },
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
      {
        test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
        type: 'asset'
      },
    ],
  },
};

webpack.config.dev.js :

const Webpack = require('webpack');
const { merge } = require('webpack-merge');
const ESLintPlugin = require('eslint-webpack-plugin');
const StylelintPlugin = require('stylelint-webpack-plugin');

const common = require('./webpack.common.js');

module.exports = merge(common, {
  target: 'web', 
  mode: 'development',
  devtool: 'eval-cheap-source-map', 
  output: {
    chunkFilename: 'js/[name].chunk.js',
    publicPath: 'http://localhost:9091/static/',
  },
  devServer: {
    client: {
      logging: 'error',
    },
    static:
      [{directory: Path.join(__dirname, "../public")}
      ,{directory: Path.join(__dirname, "../src/images")}
      ,{directory: Path.join(__dirname, "../../accueil/templates/accueil")}
      ,{directory: Path.join(__dirname, "../../templates")}
      ]
    ,
    compress: true,
    watchFiles: [
        //Path.join(__dirname, '../../**/*.py'),
        Path.join(__dirname, '../src/**/*.js'),
        Path.join(__dirname, '../src/**/*.scss'),
        Path.join(__dirname, '../../templates/**/*.html'),
        Path.join(__dirname, '../../accueil/templates/accueil/*.html'),
      ],

    devMiddleware: {
      writeToDisk: true,

    },
    port: 9091,
  headers: {
    "Access-Control-Allow-Origin": "*",
  }
  },
  plugins: [
    new Webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
    }),
    new ESLintPlugin({
      extensions: 'js',
      emitWarning: true,
      files: Path.resolve(__dirname, '../src'),
      fix: true,
    }),
    new StylelintPlugin({
      files: Path.join('src', '**/*.s?(a|c)ss'),
      fix: true,
    }),
  ],
  module: {
    rules: [
    /*{ //Added from default
        test: /\.html$/i,
        loader: "html-loader",
      },*/
      {
        test: /\.js$/,
        include: Path.resolve(__dirname, '../src'),
        loader: 'babel-loader',
      },
      {
        test: /\.s?css$/i,
        include: Path.resolve(__dirname, '../src'),
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },
});

[TheBlackTezcatlipoca]

I am having similar issue using the PyCharm plugin with a Django project. Not only are changes on .html files not being picked up (though those on .py files do) but browser reload does not seem to work at all, and changes to static files (such as .html files) are not being reflected back to the browser on manual reload. While the hot reload of python code is nice, the other issues make it problematic and almost unusable.

I have confirmed that it will not pick up any changes on a file that is not of a .py extension, with further confirmation that template changes are not picked up at all on manually reload.

When using the normal run option in PyCharm everything works as expected.

Essentially all the issues describe above.

[dkrystki]

Fixed in 1.5.0