Webpack doesn't recompile in watch mode when a partial template is changed.

[Todd-Fulton]

In html-webpack-plugin the main.html file will recompile when changed. They fixed this problem in this issue, I think with this commit, by adding the template file to the compilation dependencies.That was in 2015, so idk if there have been api changes or whatnot, but as far as my searching has gone, I think this might be where I'm having trouble right now with both webpack watch and webpack-dev-server not recompiling as I try to edit some partial templates.

[colbyfayock]

yeah this is been an issue because I haven't found a 1st class way to hook into the html-webpack-plugin pipeline early enough to support that kind of thing. right now, I'm able to achieve this by injecting the html as a string into the already compiled code. I'm open to suggestions if you're familiar enough with this, or even if you wanted to give it a shot. that might also help solve the issue here: https://github.com/colbyfayock/html-webpack-partials-plugin/issues/7

[Todd-Fulton]

I'll try; though, I'm pretty new to javascript and webpack, will probably take a while (need to read all the code and some docs first) and I might not come up with a "1st class" way to do it, but it'll be a good learning experience either way.

[colbyfayock]

That would be great! I just haven't found the time lately to do a deep dive. I'd be more than happy to help answer questions or even brainstorm if you end up trying to work through, just let me know :)

[toabm]

Hi guys, I am on the very same situation, can't figure out how to do it, but it is quite annoing having to re-compile every time you change some of the partials.... Is there anyway I could help with this issue?

[colbyfayock]

hey @toabm does this solve the issue for you? https://github.com/colbyfayock/html-webpack-partials-plugin/issues/33#issuecomment-735180603

[tarponjargon]

Here's a quick solution for wp5:

...
plugins: [        
    apply(compiler) {
      compiler.hooks.afterCompile.tap("Custom watcher", (compilation) => {
        [`${src}/partials`, `${root}/config`].forEach((path) =>
          compilation.contextDependencies.add(path)
        );
      });
    },
        ...
]

[rowild]

@tarponjargon The syntax of your "apply" snippet causes an error in my setup right in front of the first curly bracket ("unexpected token"). Is that really the proper setup?

[chrisszeluga]

@rowild If you haven't solved this yet (or for anyone else in the future...) -- The snippet @tarponjargon mentioned is really just following the Webpack plugin syntax https://webpack.js.org/contribute/writing-a-plugin/#basic-plugin-architecture

You could separate this plugin out into another file, following the guide above, or just include the class in the webpack config file.

...
class WatchPartials {
  apply(compiler) {
    compiler.hooks.afterCompile.tap("Custom watcher", (compilation) => {
      [`${paths.src}/pages`].forEach((path) =>
        compilation.contextDependencies.add(path)
      );
    });
  }
}

module.exports = {
  ...

  plugins: [new WatchPartials()],
}

Just replace ${paths.src}/pages with your directory, of course.

[buendias-dev]

You can use webpack-watch-external-files-plugin

const WatchExternalFilesPlugin = require('webpack-watch-external-files-plugin');
...
  plugins: [
    new WatchExternalFilesPlugin({
      files: [
        './src/partials/**/*'
      ]
    }),
...