【问题标题】：Webpack: Injecting variables into static service-worker.jsWebpack：将变量注入静态 service-worker.js
【发布时间】：2018-06-27 08:17:51
【问题描述】：

我正在编写 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 不会检查这些文件。

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

【问题讨论】：

标签： javascript webpack service-worker pwa

【解决方案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');
        }
      }
    ])
  ]

【讨论】：

【解决方案2】：

模块

模块放置在node_modules。 src 是您的源文件夹，您应该只保留在 production 模式下不会使用的文件。

还要记住，模块只不过是类似于库的 JavaScript 代码；一组功能。如果您将 *.js 文件从 node_modules 移动到 src - 这仍然会按模块进行。

我真的不明白你为什么要使用string-replace-loader，因为它与你的问题无关。

Loader 允许以 String.prototype.replace() 的方式执行替换（loader 在内部使用它）。这意味着如果要替换所有出现，则应在 options.search 中使用类似 RegExp 的字符串，并在 options.flags 中使用 g 标志等。

从String.prototype.replace() 到MDN：

replace() 方法返回一个新字符串，其中模式的部分或全部匹配被替换替换。模式可以是字符串或正则表达式，替换可以是字符串或每次匹配调用的函数。

还是我误会了你？

Worker-loader

但如果我理解正确的话 - 实际上有一个用于工人的装载机。

$ npm install worker-loader --save-dev

【讨论】：