使用Webpack仅使用Workbox插件->构建服务工作者代码无法指定预缓存的条目目录

我已经成功地使用Workbox CLI构建了service workers代码。

现在我想让Webpack运行相关插件,并相应地准备软件代码。

我的站点90%是静态的,它的静态文件(html和css)位于httpdocs/目录树中。在同一个目录中,我希望Workbox创建所有服务工作者代码。

我的网页包配置文件很简单:

const WorkboxPlugin = require('workbox-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {}, // tried a lot of variations of this - please read later
  plugins: [
    new WorkboxPlugin.GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
      swDest: 'httpdocs/sw.js',
      include: [/\.(?:html|css)$/], // in precaching
      exclude: [/\.(?:png|jpg|jpeg|svg)$/], // from precaching
      runtimeCaching: [
        { // runtime cache for images
          urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
          handler: 'cacheFirst',
          options: {
            expiration: { maxEntries: 10 },
            cacheName: 'images',
          },
        },
      ],
    }),
  ],
};

我尝试使用的NPM任务如下:

"build-workbox": "webpack --config=config/webpack.workbox.js"

package.json中的我的webDependencies如下所示:

"devDependencies": {
  "webpack": "^5.1.3",
  "webpack-cli": "^4.1.0",
  "workbox-webpack-plugin": "^6.1.2"
}

生成将运行,但创建的服务工作者没有要预缓存的文件。 这告诉我WorkboxPlugin没有扫描httpdocs/目录;我不能责怪它,因为我在配置中看不到将这些信息提供给插件的位置。另一方面,插件在我指定的位置正确地编写服务工作者代码。

我看到的基本问题是如何指定预缓存的入口点 :

• 如果我提供 entry: {} 到Webpack,则插件找不到任何要预缓存的文件
• entry: '../httpdocs/' 或者类似的事情,Webpack抱怨它想要文件作为入口点,而不是目录
• 我没有办法告诉WorkboxPlugin从哪里开始扫描要预缓存的文件。
• Workbox插件不接受基于全局的参数,这些参数在Workbox CLI中工作得非常好

我检查过的文件在 this page