search

webdiscus / html-bundler-webpack-plugin

Alternative to html-webpack-plugin ✅ Renders Eta, EJS, Handlebars, Nunjucks, Pug, Twig templates "out of the box" ✅ Resolves source files of scripts, styles, images in HTML ✅ Uses a template as entry point
ISC License
140 stars 14 forks source link

Can't get HMR to work #99

Closed yuenaffiliates closed 2 months ago

yuenaffiliates commented 2 months ago

Current behaviour

After saving a change to index.html, the page flashes as if reloading, but the content has not changed.

Expected behaviour

Content changes are reloaded.

Reproduction Example

webpack.config.js

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

module.exports = (env) => {
  return {
    target: 'web',
    mode: env.production ? 'production' : 'development',
    output: {
      path: path.resolve(__dirname, 'dist'),
      clean: true,
    },
    plugins: [
      new HtmlBundlerPlugin({
        entry: {
          index: './www/index.html',
        },
      }),
    ],

    // Enable HMR with live reload
    devServer: {
      static: path.resolve(__dirname, 'dist'),
      watchFiles: {
        paths: ['www/**/*'],
        options: {
          usePolling: true,
        },
      },
    },
  };
};

www/index.html

<!DOCTYPE html>

<html lang="en">
  <head> </head>

  <body>
    <h1>Test Title</h1>
    <script src="js/scripts.js"></script>
  </body>
</html>

www/js/scripts.js

console.log('Test');
  1. Run webpack serve
  2. Change the "Test Title" in index.html or in the script console log and save
  3. Observe that the page reloaded but content and console log is the same

Environment

Additional context

Logs from webpack serve and after modifying the file and saving:

> webpack serve --progress

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/workspaces/scraper/dist' directory
asset scripts.js 258 KiB [emitted] (name: scripts)
asset index.html 147 bytes [emitted] (name: __bundler-plugin-entry__index)
runtime modules 52.5 KiB 22 modules
modules by path ./node_modules/ 172 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 69.7 KiB 16 modules
  modules by path ./node_modules/webpack/hot/*.js 5.18 KiB
    ./node_modules/webpack/hot/dev-server.js 1.94 KiB [built] [code generated]
    + 3 modules
  modules by path ./node_modules/html-entities/lib/*.js 78.9 KiB
    ./node_modules/html-entities/lib/index.js 4.84 KiB [built] [code generated]
    ./node_modules/html-entities/lib/named-references.js 73.1 KiB [built] [code generated]
    + 2 modules
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
modules by path ./www/ 242 bytes
  ./www/index.html 221 bytes [built] [code generated]
  ./www/js/scripts.js 21 bytes [built] [code generated]
 HTML Bundler Plugin  ▶▶▶ (webpack 5.92.1) compiled successfully in 1052 ms
yuenaffiliates commented 2 months ago

Looking around seems this is more of a docker file change detection problem. Trying out https://github.com/facebook/create-react-app/issues/11879#issuecomment-1069553776 worked for me by adding:

    watchOptions: {
      aggregateTimeout: 200,
      poll: 1000,
      ignored: '**/node_modules',
    },
webdiscus commented 2 months ago

@yuenaffiliates

LiveReload after changes works properly.

You can try the live demo on stackblitz. For example, change the src/main.js file, e.g. add alert('Hello!'); into JS file and you will see result immediately.