Webpack:将变量注入静态服务工作者.js

Question

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

在这个特定的服务工作者中，我想使用包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');
}
}
])
]

Answer 2

模块

模块放置在node_modules中。src是您的源文件夹，您应该在其中仅保存不打算在production模式下使用的文件。

还要记住，模块只不过是一个像库一样的JavaScript代码;函数集。如果您将 *.js 文件从node_modules移动到src— 这仍然会按模块移动。

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

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

从 MDN 中的String.prototype.replace()：

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

还是我误会你了？

工人装载

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

$ npm install worker-loader --save-dev