Webpack и копирование с сохранением структуры файла - PullRequest
Новая
       19

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

0 голосов
/ 05 мая 2018

В настоящее время я настраиваю рабочий процесс веб-пакета для нового проекта, и мне трудно понять, как копировать изображения, сохраняя при этом старую структуру папок.

Например, у меня есть изображения в /src/img/folder/name/01.png

При использовании следующего правила с веб-пакетом все изображения помещаются непосредственно в папку / dist / img / без учета структуры папки. 

{
  test: /\.(jpg|png|svg/gif)$/,
  exclude: [/node_modules/, /font/, /fonts/],
  use: {
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      outputPath: 'img/',
      publicPath: 'img/ ',
    },
  },
},

Я понимаю, что буквально приказываю веб-пакету сделать это, хотя я попытался прочитать документацию по загрузчику файлов и обнаружил, что могу использовать [путь], чтобы поместить изображения в их относительную папку, но затем они в конечном итоге в /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/ ',
    },
  },
},

Но это кажется ужасно излишним. Существует ли более простой способ заставить изображения в веб-пакете копировать из различных папок / img /, которые есть у меня, и библиотек, на которые я полагаюсь, при этом сохраняя структуру папок скопированных файлов?

1 Ответ

0 голосов
/ 06 мая 2018

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

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

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

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

const config = {
  plugins: [
    new CopyWebpackPlugin([ ...patterns ], options)
  ]
}
...