Удалить часть пути для загрузчика файлов веб-пакета

Question

Я настраиваю Webpack 3 и в настоящее время настраиваю управление активами статических изображений, которые я хотел бы скопировать из моей папки src в мою папку dist. Я хотел бы сохранить структуру файлов моего /img папка на месте, поскольку она копируется в папку dist, но проблема, с которой я сталкиваюсь, заключается в том, где я пытаюсь удалить часть заполнителя пути. Возможно ли то, что я пытаюсь достичь?

У меня есть мое правило:

  {
      test: /\.(png|jpe?g|gif|ico)$/,
      use: [{
          loader: 'file-loader',
          options: {
              name: '[path][name].[ext]?[hash]',
              //outputPath: 'img/'
          }
      }]
  }

И это захватывает изображения из моего файла точки входа через контекст:

require.context('./img/', true, /\.(png|jpe?g|gif|ico)$/);

Однако, когда файл будет скопирован, так как у меня есть заполнитель [path] как часть имени, файлы будут напоминать /src/img/[name].[extension]?[hash], Я хотел бы сохранить оставшуюся часть пути нетронутой, так как некоторые изображения имеют такие пути, как /src/img/favicons/[name].[extension]?[hash] и я чувствую, что папка dist должна поддерживать эту структуру. Как вы можете видеть по коду, я пытался использовать outputPath, но это просто устанавливает файл в /img/src/img/[name].extension?[hash], Я также пытался использовать настройку publicPath, но она, похоже, не имела никакого эффекта. Конечная цель состоит в том, чтобы указанные выше 2 файла не имели /src часть имени файла включена в этот путь.

Answer 1

Контекстная опция - это то, что вы ищете, в вашем случае:

  {
      test: /\.(png|jpe?g|gif|ico)$/,
      use: [{
          loader: 'file-loader',
          options: {
              name: '[path][name].[ext]?[hash]',
              context: 'src'
          }
      }]
  }

Answer 2

На тот случай, если вы сами не решили это: useRelativePath опция, которая позволяет сохранить относительный путь. Кроме того, вы можете использовать обратный вызов в outputPath, чтобы изменить то, что он возвращает, если вы не хотите, чтобы такие вещи, как ../ там.

Док на обе вещи:

• https://github.com/webpack-contrib/file-loader
• https://github.com/webpack-contrib/file-loader

Answer 3

С помощью webpack 4 вы можете выводить данные в каталог пользователя, в данном случае в каталог родительской папки, следующим образом:

  {
    test: /\.(png|jpe?g|gif|ico)$/,
    exclude: [/some-folder/],
    use: {
      loader: "file-loader",
      options: {
        name: `[path][name].[ext]`,
        // Output into parent folder's directory
        outputPath: url => url.slice(url.indexOf(`/`) + 1)
      }
    }
  }

Выходной путь занимает url, resourcePath, context в качестве аргумента в таком порядке.

Answer 4

Вы можете удалить части пути с помощью context-option:

...
query: {
  context: path.join(__dirname, 'content'),
...