Webpack：将变量注入静态 service-worker.js

Question

我正在编写 PWA 应用程序。我使用的是我正在使用的模板（Vue.js PWA 模板）中的默认 Service Worker，但现在我决定从头开始编写自己的 Service Worker。我已将它 ( service-worker.js)放入static文件夹中，因为我想要它的静态名称 - 我不想每次都更改名称（构建）。

在这个特定的 Service Worker 中，我想使用 packagename和version，以便我可以很好地生成缓存 ID。

所以我想实现这样的目标：

./package.json：

{
  "name": "my.app",
  "version": "1.0.0",
  ...
}

./static/service-worker.js：

var CACHE_ID = 'PACKAGE_NAME-vPACKAGE_VERSION';
// ...

./build/service-worker.js：

var CACHE_ID = 'my.app-v1.0.0';

这些./build/service-worker.js显示了我想要实现的目标。

我已尝试使用以下配置的https://www.npmjs.com/package/string-replace-loader：

{
  test: /service-worker\.js$/,
  loader: 'string-replace-loader',
  options: {
    multiple: [
      {
        search: 'PACKAGE_NAME',
        replace: packageConfig.name
      },
      {
        search: 'PACKAGE_VERSION',
        replace: packageConfig.version
      }
    ]
  }
}

但据我所知，放置在其中的文件static不是模块（我是对的吗？），因此这些文件不会被module.rules.

我将非常感谢您的帮助和/或指导我如何解决这个问题。

Answer 1

好吧，我终于明白了。我已经使用过copy-webkit-plugin并且可以转换：

  plugins: [
    new CopyWebpackPlugin([
      {
        from: 'static/service-worker.js',
        to: './service-worker.js',
        transform (content) {
          var parsed = content.toString();
          var transformation = [
            {
              search: 'PACKAGE_NAME',
              replace: packageConfig.name
            },
            {
              search: 'PACKAGE_VERSION',
              replace: packageConfig.version
            }
          ];

          for(var i = 0; i < transformation.length; i++) {
            parsed = parsed.replace(transformation[i].search, transformation[i].replace);
          }

          return Buffer.from(parsed, 'utf8');
        }
      }
    ])
  ]