webpack 将清单注入服务工作者答案

【问题标题】：webpack inject manifest into service workerwebpack 将清单注入服务工作者
【发布时间】：2021-02-22 19:54:02
【问题描述】：

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

【问题讨论】：

标签： webpack progressive-web-apps service-worker

【解决方案1】：

我能够通过创建一个自定义插件来解决这个问题，该插件发出一个 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

【讨论】：