Плагин workbox webpack 4 не может предварительно кэшировать ресурсы, не относящиеся к веб-пакету
Я хочу предварительно кэшировать изображения для 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();
Ответы 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' },
]),
Ваше решение сработало. Я взял на себя смелость отредактировать ваш ответ, чтобы добавить реальный код, ожидающий утверждения. Большое спасибо.
Обратите внимание, что код globPatterns: ['/img/*.{svg,jpg,webp}'] в плагине InjectManifest больше не нужен.
Не могли бы вы предоставить журналы?