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

What is the best way to send information from child components to their parent in React

Instructions on utilizing the signUp() function in Supabase for including extra user details during the registration process

The data from the Subscribe API call is gradually loading within the ngOnInit() function

When attempting to incorporate Jasmine into my current AngularJS/Bootstrap project, I encountered the error message stating

Utilizing a Font Squirrel-provided font within Twitter Bootstrap using LESS styling techniques

Ensuring that the text box only accepts the letters A, B, and C is essential for

"Permission denied to access restricted URI" error encountered while attempting to utilize ng-template functionality

Trouble with Ajax call after transitioning from getJSON to Amcharts

How to retrieve data obtained from parsing readline and fs in node.js beyond the scope of the callback function

Unexpected errors causing havoc in my internet browser

Tips for incorporating additional filter criteria into a jquery script

Restrict user uploads to a maximum of 5 posts per minute using Jquery

Attempting to link two JavaScript files, however, only one of them is functioning correctly

What is the best way to display an alert when the button is clicked repeatedly?

Update information without the need for an xhr request in the back-end using jQuery

The function onReady() fails to trigger the execution of $.getJSON() upon page restoration in the browser

The "if" statement carries out the identical action each time it is executed

Encountering an issue in Next.js when using getStaticProps: reading 'map' of undefined properties

access the ckeditor within the frame

JavaScript has received an event on Server XHR