CodeBuild Cache Invalidation Issue with Webpack: New Hash is added to src/ Directory Prevents Cache Reuse

The issue you're experiencing with CodeBuild's caching mechanism and webpack is a common challenge when dealing with build tools that generate unique hashes. While your current cache configuration is on the right track, there are a few adjustments and considerations that can help improve cache reuse:

1. Dynamic Cache Key: Instead of relying solely on directory paths, consider using a dynamic cache key based on your project's dependencies. This approach can help maintain cache validity even when file hashes change. You can use the codebuild-hash-files function to generate a hash based on your package-lock.json file.

2. Separate Webpack Cache: Since webpack's cache is stored in the .cache directory within node_modules, you might want to explicitly cache this directory separately. This can help ensure that webpack's cache is preserved even if other parts of node_modules change.

3. Custom Cache Paths: Be more specific with your cache paths to exclude files that frequently change and invalidate the cache.

Here's an improved cache configuration you can try:

cache:
  paths:
    - 'node_modules/**/*'
    - '!node_modules/.cache/webpack/**/*'  # Exclude webpack cache
  key: npm-cache-${{ hashFiles('**/package-lock.json') }}

Then, in your buildspec.yml, you can add a separate cache entry for the webpack cache:

cache:
  paths:
    - 'node_modules/.cache/webpack/**/*'
  key: webpack-cache-${{ hashFiles('webpack.config.js') }}

This configuration does a few things:

• It caches node_modules but excludes the webpack cache directory.
• It uses a dynamic key based on the contents of package-lock.json for the npm cache.
• It separately caches the webpack cache directory with a key based on your webpack configuration.

By separating these caches and using dynamic keys, you increase the likelihood of cache hits even when file hashes change in your source directory.

Remember that caching in build systems often requires some trial and error to find the optimal configuration for your specific project structure and build process. You may need to adjust these suggestions based on your particular webpack setup and build requirements.

If you continue to face issues, you might want to consider using local caching instead of S3 caching, as it can sometimes provide better performance for larger caches like those generated by webpack.

Sources
Amazon S3 caching - AWS CodeBuild
Pull and image and cache in codebuild | AWS re:Post
Create a build project in AWS CodeBuild - AWS CodeBuild

This is solution is not working for me.

even though my cache is restore its getting invalidate.