В настоящее время я настраиваю рабочий процесс webpack для нового проекта, и мне сложно понять, как копировать изображения, сохраняя при этом старую структуру папок.
Например, у меня есть изображения в папке /src/img/folder/name/01.png
Используя следующее правило с webpack, все изображения помещаются непосредственно в папку / dist / img / без учета структуры папок.
{
test: /\.(jpg|png|svg/gif)$/,
exclude: [/node_modules/, /font/, /fonts/],
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'img/',
publicPath: 'img/ ',
},
},
},
Я понимаю, что я буквально говорю webpack сделать это, хотя я попытался прочитать документацию по загрузчику файлов и обнаружил, что могу использовать [путь] для размещения изображений в их относительной папке, но затем они попадают в /dist/img/src/img/folder/name/01.png
Я знаю, что могу установить контекст в загрузчике файлов так, чтобы он указывал на конкретный каталог, например:
{
test: /\.(jpg|png|svg|gif)$/,
exclude: [/node_modules/, /font/],
use: {
loader: 'file-loader',
options: {
context: './src/vendors/mylib/img/',
name: '[path][name].[ext]',
outputPath: 'img/',
publicPath: 'img/ ',
},
},
},
Но это кажется ужасно излишним. Есть ли более простой способ заставить webpack копировать изображения из различных папок / img /, которые есть у меня и библиотек, на которые я полагаюсь, сохраняя при этом структуру папок скопированных файлов?