плагин 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 работает с активами веб-пакетов, которые были добавлены в результаты компиляции.Возможно, у вас есть файлы в контексте сборки, такие как изображения в вашем хранилище, но они действительно должны быть необходимы или добавлены иным образом к выводу.

Один простой способ добиться этого - использовать 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' },
      ]),