Question

为PWA预缓存图像

我尝试了几次迭代，但是我正在努力解决这些问题。

这是我的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

复制webpack-plugin的实际代码，并调整clean-webpack-plugin

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

Workbox Webpack 4插件无法预缓存非Webpack资产

1 个答案: