CODEWITHSUNDEEP
webpackwebpack-dev-server
Karl
Karl

Reputation: 1854

Webpack devServer v. 4.x.x live reload not working

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?

Upvotes: 3

Views: 6359

Answers (1)

Mario Varchmin
Mario Varchmin

Reputation: 3782

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" })
]

Upvotes: 7

Related Questions