reactjswebpackwebpack-dev-serverwebpack-4html-webpack-plugin

webpack4 hot reloading not working for some files


I have a problem with react webpack4 when i try to hot reload the changes fom certain files. And those files where the ones i modified from its original path (/from /src/containers to /src/components) Rest of files reloading working well... Code of my webpack config file is below:

  const path = require('path');
  const HtmlWebPackPlugin = require("html-webpack-plugin");
  const Dotenv = require('dotenv-webpack');

  const htmlWebpackPlugin = new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
  });

  module.exports = {
    output: {
      path: path.join(__dirname, './'),
      publicPath: '/'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: "html-loader",
              options: { minimize: true }
            }
          ]
        },
        {
          test: /\.css$/,
          use: [
            {
              loader: "style-loader"
            },
            {
              loader: "css-loader",
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName: "[name]_[local]_[hash:base64]",
                sourceMap: true,
                minimize: true
              }
            }
          ]
        }
      ]
    },
    plugins: [
      new HtmlWebPackPlugin({
        template: "./src/index.html",
        filename: "./index.html"
      }),
      new Dotenv()
    ],
    devServer: {
      historyApiFallback: true,
    }
  };

Solution

  • If you can share the error log, I may tell what is the real problem. But current config is missing for an entry point. If your application is a single page app, do it like the following code;

    module.exports = {
      entry: path.join(__dirname, "src", "index.js"),
      ...
    }
    

    if you are building multi page application do it like the following code;

    module.exports = {
      entry: {
        pageOne: path.join(__dirname, "src", "pageOne", "index.js"),
        pageTwo: path.join(__dirname, "src", "pageTwo", "index.js"),
        pageThree: path.join(__dirname, "src", "pageThree", "index.js")
      }
      ...
    }