Плагин workbox webpack 4 не может предварительно кэшировать ресурсы, не относящиеся к webpack

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, Это действительно полезно при переходе на веб-пакет из других инструментов сборки или когда вы динамически создаете URL-адреса ресурсов и не используете загрузчики веб-пакетов.

РЕДАКТИРОВАТЬ: Добавление настройки с актуальным решением:

Это новая настройка каталога:

 /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' },
      ]),