workbox webpack 4 插件无法预缓存非 webpack 资产

Question

为 PWA 预缓存图像

我已经尝试了几次迭代，但我在处理 glob 时遇到了困难。

这是我 webpack.config.js 上的一个插件代码实例：

     new InjectManifest({
        swSrc: './client/sw-src.js',
        swDest: '../sw.js',
        exclude: [/\.twig$/],
        globPatterns: ['/img/*.{svg,jpg,webp}']
    }),

目录结构如下：

/public
    /dist => there's where the 'regular' webpack assets are
    /img => directory I want to add to precache on top of /dist
    ...

我也曾尝试使用 globDirectory，但没有成功。

如果我手动将下面的代码添加到我的 sw-src.js 文件中，它会起作用，但这并不理想并且容易出错。

 workbox.precaching.precache([
'/img/circles.svg',
'/img/concept-1.jpg',
......
]);

workbox.precaching.addRoute();

Answer 1

值得一提的是，Workbox 与已添加到编译输出中的 webpack 资产一起使用。您可能在构建上下文中有文件，例如存储库中的图像，但实际上需要它们或以其他方式添加到输出中。

实现此目的的一种简单方法是使用 copy-webpack-plugin。这在从其他构建工具迁移到 webpack 或动态构建资产 URL 并且不使用 webpack 加载程序时非常有用。

编辑：添加带有实际解决方案的设置：

这是新的目录设置：

 /assets/img/  => origin directory for copy-webpack-plugin
 /public
   /dist => there's where the 'regular' webpack assets are
   /img => destination directory for copy-webpack-plugin

以及 copy-webpack-plugin 的实际代码以及调整 clean-webpack-plugin

    new CleanWebpackPlugin(['public/dist/*.*', 'public/img/*.*']),
    new CopyWebpackPlugin([
        { from: './assets/img/', to: '../img' },
      ]),

workbox webpack 4 插件无法预缓存非 webpack 资产

workbox webpack 4 plugin unable to precache non-webpack assets

reactjs

webpack

service-worker

progressive-web-apps

workbox-webpack-plugin