webpackDevMiddleware does not automatically trigger a reload

Question

webpackDevMiddleware does not automatically trigger a reload

Currently, I have implemented webpack dev middleware in my project like this:

const compiledWebpack = webpack(config),
          app             = express(),
          devMiddleware   = webpackDevMiddleware(compiledWebpack, {
            historyApiFallback: true,
            publicPath: config.output.publicPath,
            overlay: {
              warnings: true,
              errors: true
            },
            compress: true,
            stats: { colors: true }
          })


    app.use(devMiddleware)




    app.get('*', (req, res) => {
      // Fetch index.html from the file system
      const htmlBuffer = devMiddleware.fileSystem.readFileSync(`${config.output.path}/index.html`)

      res.send(htmlBuffer.toString())
    })

    app.listen(PORT, function () {})

    console.log('Server running on port ' + PORT)

Despite setting up webpack dev middleware, I'm not able to achieve live reloading or enable the overlay functionality. The reason for using this setup is due to the webpackhtmlplugin integration.

I think I might be overlooking a simple concept here :( Any suggestions?

javascript express webpack html-webpack-plugin webpack-dev-middleware

Answer 1

Answer №1

To enable live reloading, it is important to incorporate the webpack-hot-middleware in your project.

Add the following code to your server:

const webpackHotMiddleware = require('webpack-hot-middleware');

const hotMiddleware = webpackHotMiddleware(compiledWebpack);
app.use(hotMiddleware);

Make sure to include 'webpack-hot-middleware/client' in your entry file and add the

webpack.HotModuleReplacementPlugin

to the plugins section of your webpack configuration:

entry: [
  'webpack-hot-middleware/client',
  './src/index.js' // Your entry point
],
plugins: [
  new webpack.HotModuleReplacementPlugin()
]

For detailed instructions, refer to the Installation & Usage guide.

Answer 2

To enable live reloading, it is important to incorporate the webpack-hot-middleware in your project.

Add the following code to your server:

const webpackHotMiddleware = require('webpack-hot-middleware');

const hotMiddleware = webpackHotMiddleware(compiledWebpack);
app.use(hotMiddleware);

Make sure to include 'webpack-hot-middleware/client' in your entry file and add the

webpack.HotModuleReplacementPlugin

to the plugins section of your webpack configuration:

entry: [
  'webpack-hot-middleware/client',
  './src/index.js' // Your entry point
],
plugins: [
  new webpack.HotModuleReplacementPlugin()
]

For detailed instructions, refer to the Installation & Usage guide.

webpackDevMiddleware does not automatically trigger a reload

Answer №1

Similar questions

In search of a render function that can effectively apply styles to HTML strings using React JS

Interact with AJAX form to dynamically display result data in the intended DIV

Stop ajax loading animation for a specific scenario

The qTip comment box vanishes when focused on by IE/Edge browsers using touch devices

A comprehensive guide on using Lua Script in Node.js to efficiently insert multiple records into a Redis Hash

Retrieving JSON data without using Jquery's Ajax function

How can you differentiate between request parameters that are in the same position?

What techniques can I implement with puppeteer to efficiently warm up the cache?

Issue with combining overflow-x, Firefox, and JavaScript

Running tests to check for next(err) functionality using supertest and Express JS

implementing token authentication in an Express.js application using JWT and the jwt-express library

Is it necessary for a click handler to be triggered when clicking on a scrollbar?

Guide on aggregating values of a specific property within an array of objects, considering a given condition

Is there a way to programmatically fetch files from a MySql / Node.js server?

How can we use jQuery to animate scrolling down to a specific <div> when clicking on a link in one HTML page and then navigating to another HTML page?

Using Vuejs to dynamically render raw HTML links as <router-link> elements

Error: Validation failed for user input in Node.js: The 'username' field is mandatory.The 'password' field is mandatory.The 'email' field is mandatory

Tips for preventing redirection in Vue 3 composition API with asynchronous requests

Issue with integrating the jquery tokeniput plugin in asp.net mvc 3

What is the best way to pass an array to a JavaScript function from a different page?