Npm 设置图像网页包加载程序的输出

我正试图通过图像webpack loader模块加载图像，它工作正常，但不是将图像保存在

outputPath

指示的位置，而是将其保存在项目的根目录中，有人知道如何定义图像的输出吗？我已经阅读了整个文档（），但找不到任何地方说明如何配置文件的输出。在这里，我留下了我的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']
            },
        }
    ],
  },
}

const autoprefixer=require（'autoprefixer'））
module.exports={
条目：['./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']，
输出：{
文件名：'./dist/bundle.js'，
},
模块：{
规则：[
{
测试：/\（gif | png | jpe？g | svg）$/i，
使用：[
“文件加载器”，
{
加载器：“图像网页包加载器”，
选项：{
bypassOnDebug:true，//webpack@1.x
禁用：true，//webpack@2.x更新的
输出路径：'/dist/images/'/[autoprefixer（）]，
},
},
{
加载器：“sass加载器”，
选项：{
IncludePath:['./节点\模块']，
},
}
],
},
{
测试：/\.js$/,，
加载器：“巴别塔加载器”，
查询：{
预设值：['es2015']，
插件：['transform-object-assign']
},
}
],
},
}

---

正如你所见，我还必须在

输入点一个接一个地输入文件，是否可以添加整个目录？
在这里回答一篇很老的帖子，但我今天遇到了同样的问题

至少它可以帮助其他有同样问题的人

在
图像网页加载程序之前为
文件加载程序设置
输出路径
，我就解决了这个问题

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

我在这里回复了一篇很老的帖子，但今天我遇到了同样的问题

至少它可以帮助其他有同样问题的人

在
图像网页加载程序之前为
文件加载程序设置
输出路径
，我就解决了这个问题

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