webpack - 如何将自定义代码附加到生成的服务工作者文件

Question

我正在使用 Webpack 和 swPrecache。swPrecache 为我生成了一个 service-worker.js 文件，我现在想将自定义代码附加到生成的文件中。

我创建了一个 Webpack 插件，将 babel 转换后的代码附加到 service-worker.js 文件中，如下所示：

swPrecache.write(filePath, options, (function(err) {

  // If we want to append an additional file.
  if (options.appendFile) {
    var sync = fs.readFile(options.appendFile, (error, code) => {
      if (error) {
        throw error;
      }
      let transformed = babel.transform(code, options.babelConfig || {});
      fs.appendFile(filePath, transformed.code);
    });
  }

  callback(err);
}));

但是，这不包括在require() 我要附加的文件中工作的代码。我相信我需要使用 Webpack 来生成 service-worker.js 文件，但我不确定如何做到这一点，可能是通过自定义入口点？

Answer 1

要将您的自定义脚本包含到生成的 serviceWorker 中，推荐的方法是使用 config 中的importScripts选项。您可以在此处sw-precache找到更多详细信息。