Да, вы правы. Ошибка `TypeError: compiler.plugin is not a function` указывает на то, что плагин `webpack-svgstore-plugin` не совместим с Webpack 5. В версии Webpack 4 плагинам необходимо было использовать метод `compiler.plugin`, но в Webpack 5 этот метод был удален и заменен на новый API.
В Webpack 5 вы можете использовать альтернативные плагины для создания SVG-спрайтов. Рассмотрите следующие варианты:
1. **svg-sprite-loader**: Этот загрузчик позволяет создавать SVG-спрайты и предоставляет гибкие возможности для их использования в вашем проекте.
- Установка:
```
npm install svg-sprite-loader --save-dev
```
- Пример настройки в `webpack.config.js`:
```javascript
module.exports = {
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
options: {
extract: true,
},
},
],
},
};
```
2. **svgstore-loader**: Это еще один загрузчик, который позволяет создать спрайт из SVG-файлов и удобно их использовать.
- Установка:
```
npm install svgstore-loader --save-dev
```
- Пример настройки в `webpack.config.js`:
```javascript
module.exports = {
module: {
rules: [
{
test: /\.svg$/,
use: [
{
loader: 'svgstore-loader',
options: { inline: true },
},
],
},
],
},
};
```
3. **webpack-svg-spritemap-plugin**: Этот плагин также может быть использован для создания спрайтов и предоставляет дополнительные функции.
- Установка:
```
npm install webpack-svg-spritemap-plugin --save-dev
```
- Пример настройки в `webpack.config.js`:
```javascript
const SvgSpritemapPlugin = require('webpack-svg-spritemap-plugin');
module.exports = {
plugins: [
new SvgSpritemapPlugin('./src/icons/**/*.svg', {
output: {
filename: 'spritemap.svg',
},
}),
],
};
```
Каждый из этих инструментов имеет свои особенности и настройки, так что вы можете выбрать тот, который лучше всего подходит для ваших нужд.