webpackcachingyalc

Invalidate Webpack's node_modules cache when yalc.lock changes


I have two projects: App and Library. App depends on Library. I'm working on both simultaneously, using yalc so that when I update Library, it will update App/node-modules/Library.

Unfortunately, Webpack caches node_modules aggressively, and it won't pick up changes to App/node-modules/Library. Reloading App doesn't help, or even killing the watch and restarting it, because it's keeping the cache in the filesystem. I read somewhere that a change to package-lock.json or yarn.lock would invalidate them, but yalc has its own separate lockfile.

What works:

What doesn't work:

Is there any way to configure Webpack so that it will invalidate its cache of node_modules if there is a change to yalc.lock?


Solution

  • In this case all you need to do is whenever you make changes to your library and publish it with yalc, you also need to change its version in the package.json.


    If you keep the version of your library the same on every yalc publish --push or yalc push no matter what you change in your library, or you update with totally different functionality it won't get reflected until you restart your server. It will keep using those cache memory.

    Webpack looks for the version of every dependency in its package.json and if it finds the same version it will use the cached asset to build no matter what you changed inside. You will find updated content in your imported dependency but changes won't be there.

    You have to change the package version so Webpack can keep track of changes and use cached assets effectively. Change in package version will cause to use of dependency with updated code without restarting the server.

    This is one of the ways Webpack improves build speed to serve the app as fast as it can. If you are using any local package or library with YALC, YARN, or NPM in your app make sure you also update its version on every publish.


    Change version along with your library changes while the publishing library is the only sophisticated way so far.

    For more understanding, you can check how Webpack uses a dependency graph to build modules.