Webpack serve doesn't reload upon file changes

Question

first time writing on Stack please don't be too harsh on me.

I'm currently experiencing problems with webpack dev server (webpack serve NOT webpack-dev-server). Changes to my files are seen by Webpack (it shows compiling every time i save my files) but the actual pages don't change at all.

For example changing my HTML files won't be displayed unless i manually reload the page (no live reloading) but changes to my .js files won't be recognized by the server unless i completely close the service and restart it.

I'm working on a simple HTML page with a literally two .js files and a couple of .css

Here's my package.json

  "name": "s2i-pullution",
  "version": "1.0.0",
  "description": "To correctly make the project run it's needed to have a personal Token for the AQICN API,",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --watch --progress",
    "dev": "webpack serve --hot --inline"
  },
  "repository": {
    "type": "git",
    "url": "git+https://gitlab.com/gp1108/s2i-weather.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://gitlab.com/gp1108/s2i-weather/issues"
  },
  "homepage": "https://gitlab.com/gp1108/s2i-weather#readme",
  "devDependencies": {
    "dotenv-webpack": "^6.0.0",
    "html-webpack-plugin": "^5.0.0",
    "webpack": "^5.21.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {}
}

Here's the webpack.config.js

const Dotenv = require('dotenv-webpack');

module.exports = {
  entry: './public/scripts/search.js',
  plugins: [
    new Dotenv(),
  ],
  output: {
    path: path.resolve(__dirname,'public/dist/'),
  },
  devServer: {
    contentBase: './public/',
    port: 8000,
  },
  watchOptions: {
    poll:500,
  },
};

Here's my project structure:

|s2i-pollution (main folder)
|---|webpack.config.js
|---|package.json
|---|package-lock.json
|---|node_modules (folder)
|---|.env
|---|public (folder)
|-----|index.html
|-----|city.html
|-----|images (folder)
|-----|styles (folder)
|-----|scripts
|-------|search.js
|-------|theme-chooser.js
|-----|dist (folder)
|-------|main.js

I've imported theme-chooser.js into search.js with this line of code: import './theme-chooser.js';

I'm currently using Xubuntu 20.04 LTS.

What am i doing wrong?

score 0 · Answer 1 · answered Jun 08 '21 at 11:05

If you see the message [HMR] Waiting for update signal from WDS... in the browser's console, when you open your application, but not the messages [WDS] Hot Module Replacement enabled. and [WDS] Live Reloading enabled., then you could try and add the parameter target: 'web' to your webpack.config.js like so:

const Dotenv = require('dotenv-webpack');

module.exports = {
  entry: './public/scripts/search.js',
  plugins: [
    new Dotenv(),
  ],
  output: {
    path: path.resolve(__dirname,'public/dist/'),
  },
  devServer: {
    contentBase: './public/',
    port: 8000,
  },
  watchOptions: {
    poll:500,
  },
  target: 'web',
};

Also, make sure that you have the following three lines of code in your search.js file:

if (module.hot) {
    module.hot.accept();
}

For additional information you can look here: Hot Module Replacement | Webpack

Webpack serve doesn't reload upon file changes

1 Answers1