javascript - Webpack:将变量注入(inject)静态 service-worker.js

Question

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

在这个特定的 Service Worker 中，我想使用包 name和 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');
        }
      }
    ])
  ]