时间戳

首页 > 解决方案 > webpack 将清单注入服务工作者

webpack - webpack 将清单注入服务工作者

问题描述

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

标签： webpackprogressive-web-appsservice-worker

解决方案

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

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 插件数组中，并在 service worker 中使用 importScripts('filesList.js') 调用该文件，以便我创建的 getFilesList() 方法可见。这是使用 webpack v.5

推荐阅读