CODEWITHSUNDEEP
webpack-dev-serverwebpack.config.js
kamill
kamill

Reputation: 1

webpack-dev-server --hot - didn't refresh browser files

I have no idea anymore. After updating node.js and webpack, I cannot set reload devServer.

I try with:

mode: "development", static: hot: true

and a few more things from google. What am I doing wrong or where is the error? There are no errors in the console. I want to configure webpack to write in ES6, nothing else.

package.json

    {
      "name": "calc",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack-dev-server --hot",
        "build": "webpack -d"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "@babel/core": "^7.19.3",
        "@babel/preset-env": "^7.19.3",
        "babel-loader": "^8.2.5",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "webpack-dev-server": "^4.11.1"
      }
    }

webpack.config.js

const path = require("path");

const entryPath = ".";

module.exports = {
  mode: "development",
  entry: `./${entryPath}/js/app.js`,
  output: {
    filename: "out.js",
    path: path.resolve(__dirname, `${entryPath}/build`),
  },
  r: {
    static: path.join(__dirname, `${entryPath}`),
    hot: true,
    compress: true,
    port: 3001,
    open: true,
    headers: { "Access-Control-Allow-Origin": "*" },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

directory structure

Node.js version: v18.9.0 NPM version: 8.19.1

Thanks for the answer.

Upvotes: 0

Views: 344

Answers (1)

Andrey.Kostyuchenko
Andrey.Kostyuchenko

Reputation: 502

Please provide your webpack verison. For webpack 5 use

  devServer: {
    watchFiles: ['src/**/*.php', 'public/**/*'],
  }

See details here https://webpack.js.org/configuration/dev-server/#devserverwatchfiles

Upvotes: 0

Related Questions