workbox webpack plugin exclude folder from precache manifest

I'm using the workbox webpack plugin with vue cli 3 and I would like to exclude the files in a folder from being added to the precache manifest.

See my current file structure below

/src
/assets
  /css
  /shell
    file1.svg
    file2.svg
    file3.svg
  /svg
    file4.svg
    file5.svg
    file6.svg

I want to include the files in the shell folder in my precache manifest but I don't want to include the ones in the svg folder.

I've tried using the globIgnores and exclude options of workboxOptions in the vue.config.js file but I'm not getting the desired result.

When I tried globIgnores: ['src/assets/svg/*'], nothing happened as all the files are included

When I tried exclude: [/\.svg$/], it excluded the svg files in both folders.

I tried to alter the match pattern for the exclude option per below but it didn't work either:

exclude: [/^file4.*\.svg$/,
          /^file5.*\.svg$/,
          /^file6.*\.svg$/]

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://mcmap.net/q/703305/-regex-in-webpack-loader-exclude-include-config-doesn-39-t-work

Recommended topics

Hot tags