workbox webpack plugin exclude folder from precache manifest

I encountered a similar issue, if not the same, and was able to tease out an answer after staring at the docs here for a bit:

https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#generateSW-exclude

I wanted to auto-generate the precache-manifest, but exclude a particular folder along with specific filenames. So, my vue.config.js is now something like this:

pwa: {  workboxOptions: {    exclude: [      /index\.html$/,      /client-config\.js$/,      /^.*folder-to-exclude\/.*$/,    ]  }}

The exclude/include properties are arrays of regular expressions or strings. The reason that your expression for exclude picked up all svg files is simply that per your regex, you're looking for anything ending in .svg.

You might try something like this:

module.exports = {    pwa: {        appleMobileWebAppCapable: 'yes',        appleMobileWebAppStatusBarStyle: 'black',        workboxOptions: {            include: [                /^.*shell\/.*$/,            ],            exclude: [                /^.*svg\/.*$/,            ]        }    }};

Keep in mind that since we specified an include, we won't need to exclude as Webpack only grabs what you asked for under include. However, I added both include/exclude in the example above for the sake of this answer.

One way to test all this stuff w/o building over and over is to go to the root of the folder, public folder in my case, and run this command:

find .

This should recursively grab a list of all files/folders and return something like this:

../svg./svg/safari-pinned-tab.svg./svg/safari-pinned-tab-2.svg./svg/safari-pinned-tab-1.svg./favicon.ico./index.html./shell./shell/android-chrome-192x192.png./shell/android-chrome-512x512.png./img./img/icons./img/icons/favicon-16x16.png./img/icons/safari-pinned-tab.svg./img/icons/apple-touch-icon-120x120.png./img/icons/android-chrome-192x192.png./img/icons/apple-touch-icon.png./img/icons/apple-touch-icon-152x152.png./img/icons/apple-touch-icon-180x180.png./img/icons/apple-touch-icon-76x76.png./img/icons/android-chrome-512x512.png./img/icons/msapplication-icon-144x144.png./img/icons/mstile-150x150.png./img/icons/apple-touch-icon-60x60.png./img/icons/favicon-32x32.png./robots.txt

Then, take that output and head over to regex101.com and try out the include and exclude expressions that match your use case. Here is an example:

https://regex101.com/r/nzEwCz/2/

This will merely help narrow down the expression, I find, and you'll need to refine it in your IDE. I know this is a fairly verbose answer and if you have any questions just comment below.

Note: The expressions may be different under on a Windows box, see this question/answer: https://stackoverflow.com/a/38190159/128795