Установите вывод для image-webpack-loader - PullRequest
Новая
       46

Установите вывод для image-webpack-loader

0 голосов
/ 20 декабря 2018

Я пытаюсь загрузить изображения через модуль image-webpack-loader, он работает правильно, но вместо сохранения изображения, где указывает outputPath, он сохраняет его в корневой директории проекта, кто-нибудь знаеткак определить вывод изображений?Я прочитал всю документацию ( webpack-image-loader ) и не могу найти места, где написано, как настроить вывод файлов.Здесь я оставляю свой webpack.config.js 

const autoprefixer = require('autoprefixer')

module.exports = {
entry: ['./assets/src/scss/index.scss', './assets/src/service/clanService.js', './assets/src/service/locationService',
    './assets/src/model/Clan.js', './assets/src/model/Location.js', './assets/src/model/Player.js',
    './assets/src/utils/material.js', './assets/src/utils/constants.js', './assets/src/utils/auxFunctions.js',
    './assets/src/fonts/Supercell-magic-webfont.generated.woff','./assets/src/images/Clash_Royale.png'],
output: {
    filename: './dist/bundle.js',
},
module: {
    rules: [
        {
            test: /\.(gif|png|jpe?g|svg)$/i,
            use: [
                'file-loader',
                {
                    loader: 'image-webpack-loader',
                    options: {
                        bypassOnDebug: true, // webpack@1.x
                        disable: true, // webpack@2.x and newer
                        outputPath: '/dist/images/' // <-- Thats not work
                    },
                },
            ],
        },
        {
            test: /^(?!.*\.generated\.ttf$).*\.ttf$/,
            use: ['css-loader', 'fontface-loader'],
        }, {
            test: /\.generated.(ttf|eot|woff|woff2)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    outputPath: '/dist/fonts/',
                },
            }],
        },
        {
            test: /\.scss$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: './dist/bundle.css',
                    },
                },
                {loader: 'extract-loader'},
                {loader: 'css-loader'},
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: () => [autoprefixer()],
                    },
                },
                {
                    loader: 'sass-loader',
                    options: {
                        includePaths: ['./node_modules'],
                    },
                }
            ],
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015'],
                plugins: ['transform-object-assign']
            },
        }
    ],
  },
}

Как вы видите, мне также нужно вводить файлы один за другим в точке entry, возможно ли добавить целые каталоги?

1 Ответ

0 голосов
/ 12 июня 2019

Отвечая на довольно старый пост здесь, но у меня была та же проблема сегодня.

По крайней мере, это может помочь кому-то еще с той же проблемой.

Установка outputPath для file-loader до image-webpack-loader решила его для меня. 

{
    test: /\.(gif|png|jpe?g|svg)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                outputPath: '/dist/images/'
            }
        },
        {
            loader: 'image-webpack-loader',
            options: { ... }
        }
    ]
}
...