Как настроить Webpack для правильного разрешения путей к картинкам при сборке проекта, если пути для ассетов указаны в виде строк в исходном коде React приложения?
Webpack не обрабатывает пути к изображениям правильно из-за того, что по умолчанию он не умеет работать с данными типами файлов. Для правильного разрешения путей к изображениям при сборке проекта с помощью Webpack, необходимо настроить его возможности по работе с различными типами файлов.
Для этого нужно добавить соответствующий loader в конфигурацию Webpack. Например, для обработки изображений можно использовать file-loader или url-loader. Вот пример настройки Webpack для обработки изображений с использованием file-loader:
```javascript
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: 'images/[name].[ext]',
},
},
],
},
],
},
```
После добавления такой секции в конфигурацию Webpack, все изображения будут обработаны соответствующим loader'ом и подключены правильно.
Если пути для ассетов указаны в виде строк в исходном коде React приложения, то можно использовать import для импортирования изображений в компоненты и указания путей к ним:
```javascript
import imgPath from './path/to/image.png';
const MyComponent = () => {
return (
<img src={imgPath} alt="My Image" />
);
};
```
Webpack автоматически заменит такие импорты на правильные пути к изображениям во время сборки проекта.
Вот если я пишу адрес images/img-1.png, то webpack после билда его как есть подставляет
Пример (который работает у меня) webpack.config.js (с react и без react (статика+ejs)) перекладывания различных "assets" вroot-project/distво время билда:
export default () => { // ... module: { rules: [ { test: /\.(css|sass|scss)$/i, use: ['css-loader', 'sass-loader'], generator: { filename: 'assets/css/[name].[contenthash:10][ext]' } }, { test: /\.(png|svg|jpe?g|webp)$/i, type: 'asset/resource', generator: { filename: 'assets/images/[contenthash:10][ext]' } }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', generator: { filename: 'assets/fonts/[contenthash:10][ext]' } }, ], }, // ... }