Webpack и копирование с сохранением файловой структуры

В настоящее время я настраиваю рабочий процесс 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 /, которые есть у меня и библиотек, на которые я полагаюсь, сохраняя при этом структуру папок скопированных файлов?


webpack javascript webpack-file-loader webpack-2
person Dixos    schedule 05.05.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать copy-webpack-plugin для копирования файлов из одного места в другое.

Вы используете file-loader / img-loader неверно, загрузчики - это те, кто отвечает за введение новых типов файлов в webpack (в основном они конвертируют типы none-js в js).

Простое использование:

const CopyWebpackPlugin = require('copy-webpack-plugin')

const config = {
  plugins: [
    new CopyWebpackPlugin([ ...patterns ], options)
  ]
}
person felixmosh    schedule 05.05.2018
comment
Ах я вижу. Тогда я попробую другой подход с моим файлом конфигурации. Я смотрел руководства, представленные Academind и Traversy Media на YouTube, в которых предлагалось использовать загрузчики таким образом. - person Dixos; 06.05.2018