2

我正在寻找使用此文档为 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();
4

1 回答 1

2

值得一提的是，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' },
      ]),
于 2018-12-28T20:35:12.363 回答