Как настроить 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]' } }, ], }, // ... }