3

I'm following these webpack 5 guides, and webpack-dev-server v4.3.1 does not live reload the sample project (a recompile does happen after editing either JavaScript file). Perhaps I have missed a step?

1. Can you tell me where the problem lies?

Here's my configuration:

package.json

{
  "name": "components",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "devDependencies": {
    "autoprefixer": "^10.3.7",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "postcss": "^8.3.9",
    "tailwindcss": "^2.2.16",
    "webpack": "^5.58.1",
    "webpack-cli": "^4.9.0",
    "webpack-dev-middleware": "^5.2.1",
    "webpack-dev-server": "^4.3.1"
  },
  "scripts": {
    "start": "webpack serve --open",
  },
  "repository": {
    "type": "git",
    "url": "components"
  },
  "author": "Karl",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
  entry: {
    index: './src/index.js',
    print: './src/print.js',
  },
  devServer: {
    static: { 
            directory: './dist',
            watch: true
        },
  },
    plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management',
    }),
  ],
    output: {
    filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    }
};

Below is the result of running the npm start script (the 2 files in ./src, index.js and the print.js, are copied from the above linked guide). If I edit either file, live reload does not work, but after manually refreshing the browser the edits are reflected.

enter image description here

If it matters, the above is from VS Code's Bash terminal, and I'm running Windows 10.

2) BONUS: What configuration changes do I need to make in order to live reload a static index.html file located in the project's root folder?

Karl
  • 1,814
  • 1
  • 25
  • 37

1 Answers1

7

This configuration should do the trick:

devServer: {
    hot: false, // optional, but you must not set both hot and liveReload to true
    liveReload: true
}

The live-reloading of the static index.html can be achieved with this plugin configuration:

plugins: [
  ...,
  new HtmlWebpackPlugin({ template: "src/index.html" })
]
Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
Mario Varchmin
  • 3,704
  • 4
  • 18
  • 33
  • I was ready to answer my own question, but I see you beat me to it. Seems strange that the default values for both options, i.e. true are incompatible. Note though, they can both be true if `devServer.watchFiles` is configured, [per the docs](https://webpack.js.org/configuration/dev-server/#devserverwatchfiles). Also, the guides do not mention that `HotModuleReplacementPlugin` needs to be installed and it was not auto added to my node modules as the webpack docs imply it should be. I'm still not able to auto reload a static index.html file. Perhaps I'll post another question. – Karl Oct 14 '21 at 10:10
  • My static index.html is live-reloaded with this plugin configuration: `new HtmlWebpackPlugin({ template: "src/index.html" })`. I find it fascinating, how webpack leads to very different outcomes with very similar configurations. – Mario Varchmin Oct 14 '21 at 10:17
  • There is even more to it. Webpack allows to automatically reload only the blocks of code that were changed, and without generation of both /dist folder and index.html, as in your case. It is called Hot Module Reload. [more](https://stackoverflow.com/questions/42445288/enabling-webpack-hot-reload-in-a-docker-application/72717329#72717329) – Maksym Dudyk Jul 18 '22 at 06:13