Как повторить и скопировать путь к каталогам sr c таким же образом в dist с помощью file-loader? - PullRequest
Новая
       33

Как повторить и скопировать путь к каталогам sr c таким же образом в dist с помощью file-loader?

0 голосов
/ 24 января 2020

Я использую webpack 3 и file-loader . Мне нужен каталог для копирования / images / ** с тем же относительным путем и файлами для моего каталога сборки.

Например:

У меня есть 'src / images / icon / ', ' src / images / bg / ', ' src / images / temp / * ' et c. И мне нужно скопировать ту же структуру в моем 'dist / images' ?

Как я могу это сделать ... потому что сейчас любые опции, которые я использовал, просто создают один каталог 'images' и я не могу найти способ скопировать всю структуру со всеми включенными в нее файлами. Может ли «загрузчик файлов» это сделать? 

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
        outputPath: 'images',
    }
}

Спасибо

1 Ответ

0 голосов
/ 29 января 2020

Решил это. Может быть, это кому-то поможет.

Секрет был в том, чтобы понять разницу между 'file-loader' 'и' webpack-copy-plugin '.

-' file-loader 'работает с файлами, которые вы вызываете из js / css et c. (в фоновом режиме, например, css) - ' webpack-copy-plugin ' работает с такими значениями, как «какая копия» и «куда копировать».

Итак, для моего случая Мне нужно использовать 'webpack-copy-plugin', который решает проблему.

Но также я должен настроить 'file-loader' для сохранения имени файла без ha sh с конфигурацией по умолчанию.

Итак, вот мой случай: 

module: {
    rules: [
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: 'images/[name].[ext]',
                publicPath: 'images',
                outputPath: 'images'
            }
        }
    ]
},

plugins: [
        {
            from: 'src/images',
            to: 'images',
            force: true
        }
    ])
],

Этот параметр полностью сохраняет ваш исходный код с зависимостями пути к изображению и их именами

...