how to make webpack recompile on dev mode with cache on? about html-webpack-plugin HOT 15 CLOSED

There is a bug in cache for html-webpack-plugin, that is why we disable it, I am working on the new major release without this bug, cache will work without extra setup in future and without bugs

from html-webpack-plugin.

Yeah( I am still working on it, anyway HTML generation is fast, so just check it out

from html-webpack-plugin.

You should not run:

setInterval(() => {
      compiler.compile()
    }, 60000)

it is bad for perf

from html-webpack-plugin.

Sorry I don't undestand what do you try to do

from html-webpack-plugin.

i'm trying to get data from server and inject into html, like this

const res = await axios.get('xxx.com/xxxxx')
data.html += res.data

on dev mode, i want to use timer to check whether data from server changed and regenerate html if changed

from html-webpack-plugin.

Please use HtmlWebpackPlugin.getHooks(compilation).beforeEmit right now (getCompilationHooks is not released), I don't recommend to run compiler.compile using times, you can send a HEAD request and check it is 304 code or not, and only when somethings changed re-run compilation

from html-webpack-plugin.

how to re-run compilation, do u mean npm run dev again?

from html-webpack-plugin.

@robotsmeagol to rerun compilation I recommend to make compiler.watching.invalidate(), note compiler.watching is not undefined only when you watch

from html-webpack-plugin.

i tried compiler.watching.invalidate(), but only first time this would works, after that html won't regenerate

from html-webpack-plugin.

What do you mean won't regenerate?

from html-webpack-plugin.

U can check on this demo
in config/Myplugin.js, i inject customData to html
customData is always 100 and never changed

from html-webpack-plugin.

Solution:

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

class MyPlugin {
  constructor() {
    this.pathToData = path.resolve(__dirname, "./my-data.json");
  }

  apply(compiler) {
    compiler.hooks.thisCompilation.tap("MyPlugin", (compilation) => {
      HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
        "MyPlugin",
        (data, cb) => {
            let content;

            try {
                content = compilation.inputFileSystem.readFileSync(this.pathToData, "utf8");
            } catch (error) {
                cb(error);

                return;
            }

            content = JSON.parse(content);

            compilation.fileDependencies.add(this.pathToData);

            data.html = data.html.replace(
                "</head>",
                `<script>window.customData=${JSON.stringify(content.value)}</script></head>`,
            );

            cb(null, data);
        },
      );
    });
  }
}

module.exports = MyPlugin;

File:

my-data.json

{
  "value": "11244123"
}

Add:

{
  watchFiles: [require("path").resolve(__dirname, "my-data.json")],
  // Other options
}

to config/webpackDevServer.config.js

And disable cache for HtmlWebpackPlugin

new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            cache: false,
            inject: true,
            template: paths.appHtml,
          },
          isEnvProduction
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined,
        ),
      ),

i.e. cache: false, so webpack will automatically reload page and apply new data

from html-webpack-plugin.

Hi @alexander-akait , has the issue about the cache been fixed right now? And I have an addition question: if we change the cache to false, doesn't it mean that the HTML file will be regenerated so long as you make changes to your source code no matter what files you are touching, is that right?

from html-webpack-plugin.

The HTML can be generated fast, but it causes the dev server to reload the whole page, HMR won't work in that case, right? So in a large project, the impact is significant

from html-webpack-plugin.

The HTML can be generated fast, but it causes the dev server to reload the whole page, HMR won't work in that case, right? So in a large project, the impact is significant

HTML should be generated only when you make changes in HTML files, but I don't you did it often

from html-webpack-plugin.