工作箱 webpack 4 插件无法预缓存非 webpack 资产答案

【问题标题】：workbox webpack 4 plugin unable to precache non-webpack assets工作箱 webpack 4 插件无法预缓存非 webpack 资产
【发布时间】：2019-05-26 02:37:54
【问题描述】：

我希望使用 this documentation. 为 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();

【问题讨论】：

能否提供日志？

标签： reactjs webpack service-worker progressive-web-apps workbox-webpack-plugin

【解决方案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' },
      ]),

【讨论】：

您的解决方案有效。我冒昧地编辑了您的答案以添加实际代码，等待批准。非常感谢。
请注意，InjectManifest 插件上的globPatterns: ['/img/*.{svg,jpg,webp}'] 代码不再需要。