webpack 将清单注入 service worker

Question

在 webpack 中，我的大多数文件名都附加了一个内容哈希，例如'app.bfu98y98UB899UHhi9q.js' 这会带来一个问题，因为在我的服务工作者文件中，我需要添加所有将被缓存的文件名的列表，但所有文件名在构建之后才知道。现在，我发现了 webpack 清单插件，它发出一个 json 文件，其中包含一个转换后的文件名列表。所以我觉得很好，现在我可以将 json 导入我的服务人员，但后来我发现你不能将 json 导入服务人员。所以现在我不知道如何为我的服务人员提供哈希文件名列表。我知道有一些插件，例如 workbox 插件，可以为您处理所有这些，但我想知道如果没有这样的插件，我该如何完成。感谢任何帮助，谢谢

Answer 1

我能够通过创建一个自定义插件来解决这个问题，该插件发出一个 javascript 文件，该文件包含一个将所有输出散列文件名添加到数组中的函数。然后我使用 WorkerGlobalScope 上的方法 importScripts(file)（因为服务工作者不允许常规导入）来访问 returns 带有散列文件的数组的函数名字。自定义插件如下所示：

function FilesListPlugin() {}
FilesListPlugin.prototype.apply = compiler => {
  compiler.hooks.emit.tapAsync('FileListPlugin', (compilation, callback) => {
    const filelist = Object.keys(compilation.assets).map(fileName => '${fileName}'`);
    compilation.assets['filesList.js'] = {
      source: () => `const getFilesList = () => [${filelist}]`,
      size: () => filelist.length,
    };
    callback();
  });
};

然后我将插件导入到 webpack 插件数组中，并在服务工作线程中使用 importScripts('filesList.js') 调用文件，以便我创建的 getFilesList() 方法可见。这是使用 webpack v.5

webpack 将清单注入 service worker

webpack inject manifest into service worker

webpack

progressive-web-apps

service-worker