Changes doesn't effect on hot reload.

[sakibb7]

Changes doesn't effect on hot reload. I have to restart the server to see the changes made on partial components created by this plugin.

my webpack.config.js file

const path = require("path"); const CopyPlugin = require("copy-webpack-plugin"); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const fs = require('fs'); const HtmlWebpackPlugin = require("html-webpack-plugin"); const HtmlWebpackSimpleIncludePlugin = require("html-webpack-simple-include-plugin");

module.exports = { entry: { main: "./src/index.js", }, mode: "development", devServer: { watchFiles: ["src/*/"], hot: true, }, module: { rules: [ { test: /.css$/i, include: path.resolve(dirname, "src"), use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', ], }, { test: /.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', } ], }, resolve: { extensions: [".tsx", ".ts", ".js"], }, plugins: [ new MiniCssExtractPlugin({ filename: 'styles.css', }), new CopyPlugin({ patterns: [ { from: "src/assets", to: "assets" } ], }), new HtmlWebpackPlugin({ template: "src/index.html", }), new HtmlWebpackPlugin({ filename: "about.html", template: "src/about.html", }), new HtmlWebpackSimpleIncludePlugin([ { tag: '', content: fs.readFileSync(path.resolve(dirname, "src/partials/footer.html")),

  },
  {
    tag: '<include-header />',
    content: fs.readFileSync(path.resolve(__dirname, "src/partials/header.html")),
  }
])

], output: { filename: "index.js", path: path.resolve(__dirname, "dist"), clean: true, }, };

[mfoitzik]

Hi, I'm not really actively working on this project anymore, but have you tried the following:

module.exports = {
  //...
  devServer: {
    watchContentBase: true
  }
};

Further info at: https://v4.webpack.js.org/configuration/dev-server/#devserverwatchcontentbase

[sakibb7]

Thank you for your reply. I've tried it and doesn't work. It throws an error. I am using webpack v5