Workbox Webpack插件从预缓存清单中排除文件夹

Question

我正在将工作盒Webpack插件与vue cli 3配合使用，并且希望将文件夹中的文件排除在添加到预缓存清单之外。

请在下面查看我当前的文件结构

/ src/资产/ css/贝壳file1.svgfile2.svgfile3.svg/ svgfile4.svgfile5.svgfile6.svg

我想将文件包含在我的预缓存清单中的shell文件夹中，但我不想将它们包含在svg文件夹中。

我已经尝试在vue.config.js文件中使用workboxOptions的globIgnores和exclude选项，但没有得到想要的结果。

[当我尝试globIgnores: ['src/assets/svg/*']时，没有任何反应，因为包含了所有文件

[当我尝试exclude: [/\.svg$/]时，它排除了两个文件夹中的svg文件。

我尝试根据下面的方法为排除选项更改匹配模式，但它也不起作用：

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

Answer 1

我想自动生成precache-manifest，但要排除特定文件夹和特定文件名。所以，我的vue.config.js现在像这样：

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

exclude / include属性是正则表达式或字符串的数组。您的

exclude表达式提取了所有
svg文件的原因仅仅是因为您的正则表达式中，您要查找以。svg结尾的任何内容。 您可以尝试这样的事情：
module.exports = {
    pwa: {
        appleMobileWebAppCapable: 'yes',
        appleMobileWebAppStatusBarStyle: 'black',
        workboxOptions: {
            include: [
                /^.*shell\/.*$/,
            ],
            exclude: [
                /^.*svg\/.*$/,
            ]
        }
    }
};
请记住，由于我们指定了
include

，因此我们不需要

exclude，因为Webpack仅会在
include下获取您的要求。但是，为了得到这个答案，我在上面的示例中都添加了include / exclude。一种不需一遍又一遍地测试所有这些东西的方法是转到文件夹的根目录（在我的情况下为public文件夹，然后运行以下命令：
find .
这应该以递归方式获取所有文件/文件夹的列表并返回类似以下内容的内容：
.
./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

然后，获取该输出并转到regex101.com，然后尝试与您的用例匹配的
include
和
exclude
表达式。这是一个例子：
https://regex101.com/r/nzEwCz/2/我发现这只会帮助缩小表达式的范围，您需要在IDE中对其进行优化。我知道这是一个非常冗长的答案，如果您有任何疑问，请在下面评论。
注：
在Windows框中的表达式可能有所不同，请参见此问题/答案：https://stackoverflow.com/a/38190159/128795