[WIP] hot module reload support for webpack5

[ShoryuKyzan]

WIP

Summary

Localizes hot module replacement modules for webpack5, so that a localized application still functions with hot reload mode.

Help please

I made changes to the built NPM package, tested, and use it every day. Our setup is vue 3/vuetify 3/vue-loader. I need some guideance setting up natural test cases and building. The repo tests don't seem to reflect how to integrate this into a project?
I will slowly work on getting the below items correct, but assistance with setup would be a quicker way to get this published if you wish to have it.

• Need help setting up build
  • npm run build doesnt create any output that is like the content of node_modules. Just 2 minified files
  • pnpm seems to be involved in the setup, and isn't quite working right on my system (windows + cygwin). I will look into getting this right
  • Your linting throws alot of warnings unrelated to what I've added, I'm guessing these aren't required to pass things?
• natural test environment?
  • My particular stack is vue 3, vuetify 3, vue-loader, and custom webpack plugin that at runtime determines which JS resource to load.
  • I'm not sure what a typical test setup would be for this plugin otherwise. It seems that something must be done in the code to choose the localized version at runtime.
  • Share test setup?
• Is webpack 4 relevant here?
  • For our project, only webpack 5 is relevant. The submitted code does not affect a webpack4 setup.
  • Help me set up a webpack 4 test setup and I'll make it work!

Changes

• for everything below, if not webpack 5, default actions are taken, no new functionality
• process modules that contain placeholders and also if tagged as a hotmodule replacement
• options set a hmrLocale that should be used for localizing HMR updates.
• if hmr module, update the asset instead of delete/recreate asset.
• if hmr module and nothing to update in the module, dont continue or emit anything (would cause infinite loop)

[privatenumber]

Thanks for the draft PR to let me know your intentions. I haven't actually tried with this HMR so glad you're working on it.

Since linting & building all happens on GitHub Actions Linux, you can take a look at those environments for reference to debug. Linting warnings can be ignored but no errors allowed (this will be caught by CI or lint-hook hook).

I'm not sure if I understand your testing questions. Have you tried running pnpm dev?

I think the highest value task right now is adding failing tests. We'll need tests to make sure this behavior is working anyway, but if there are failing test cases, it would make it easier for me or others to collaborate with you.

[ShoryuKyzan]

I'll definitely check out the tests and github actions!
What I really could use is a sample project setup using this plugin that's not the same as ours. Something you test it with. Maybe I should be looking at webpack i18n plugin for an example since its based on this?

[ShoryuKyzan]

Just fyi, currently working on releasing this in a github repo for now. Haven't had alot of chances to work on this.

[privatenumber]

TIL!

If you're just publishing to test, check out git-publish. It works like npm publish, but pushes to a GitHub branch.

[ShoryuKyzan]

I did manage to publish it!
https://github.com/ShoryuKyzan/webpack-localize-assets-plugin/blob/shoryukyzan/hot-module-reload/README.md

From looking at the tests you've defined, it seems like they don't cover this kind of thing.
I see unit tests for contenthash and stuff like that. Not really sure how to generate a test tbh. I would probably have to look at unit tests for webpack itself to find the bits that do hot module reload.