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

我在写PWA应用程序。我使用的是我正在使用的模板中的默认服务工作者（Vue.js PWA template），但现在我决定从头开始编写自己的模板。我已经将它（

service worker.js

）放入了

static

文件夹，因为我希望它有一个静态名称-我不想每次都更改名称（构建）

在这个特定的服务人员中，我希望使用包

名称
和
版本
，以便很好地生成缓存ID

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

/package.json：

{
“名称”：“my.app”，
“版本”：“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
显示了我想要实现的目标

我尝试了以下配置：

  {
    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
不会检查这些文件

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

模块放置在
节点\u模块中
src
是您的源文件夹，您应该只在其中保存在
production
模式下不使用的文件

还要记住，模块只不过是一个类似于库的JavaScript代码；函数集。如果您将*.js文件从
node\u模块
移动到
src
，这仍然会按模块进行

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

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

和中的
String.prototype.replace（）
：

replace（）方法返回一个新字符串，其中包含替换所替换模式的部分或全部匹配项。模式可以是字符串或RegExp，替换可以是字符串或为每个匹配调用的函数

还是我误解了你

但如果我没弄错的话——实际上有一个工人装载机

$ npm install worker-loader --save-dev

好的，我终于明白了。我使用了
复制webkit插件
，它可以转换：

  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');
        }
      }
    ])
  ]

插件：[
新的CopyWebpackPlugin([
{
from:'static/service worker.js'，
收件人：'./service worker.js'，
转换（内容）{
var parsed=content.toString（）；
变量转换=[
{
搜索：“包名称”，
替换：packageConfig.name
},
{
搜索：“软件包_版本”，
替换：packageConfig.version
}
];
对于（var i=0；i