Как в Webpack сохранить относительные пути для картинок?

Question

[Mesuti]

Как в Webpack сохранить относительные пути для картинок в итоговом проекте?

Пример:

/img/1.jpg
/img/folder/2.jpg

Корень итогового проекта /dist/

Надо так:

/dist/img/1.jpg
/dist/img/folder/2.jpg

А получается только так:

Настройка file-loader:

test: /\.(gif|png|jpe?g|svg)$/i,
 use: [{
  loader: 'file-loader',
  options: {
   // перебор вариантов
   name: '[name].[ext]' // ->  /dist/1.jpg и /dist/2.jpg все в корень папки
   name: '[folder]/[name].[ext]' // ->  /dist/img/1.jpg и /dist/folder/2.jpg создает папки без вложенности
   name: '[path]/[name].[ext]' // ->  /dist/src/img/1.jpg и /dist/folder/2.jpg берет лишний src 
   path: path.resolve(__dirname, 'dist/[folder]'), // -> /dist/1.jpg и /dist/2.jpg все в корень папки
  }
}

Answer 1

[darkfriend]

Столкнулся с похожей проблемой.
Решил её вот так:

output: {
   assetModuleFilename: (path) => {
       if(typeof path.filename !== "undefined" && path.filename.match(/(img)/)) {
           path.filename = path.filename.replace('src/', '');
           return `${path.filename}/[name].[ext]`;
       }
       return '[name].[ext]';
   }
}

В итоге `src` уберется и будет `/dist/img/1.jpg`, а для другого будет применен стандартный шаблон.
Если у вас source директория другая, то укажите другую.
Также можно указать другой финальный путь.

Answer 2

[Дмитрий]

https://webpack.js.org/configuration/output/#outpu...