Question

我正在尝试通过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点一个接一个地输入文件，是否可以添加整个目录？

Answer 1

在这里回答一个相当老的帖子，但是今天我遇到了同样的问题。

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

在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: { ... }
        }
    ]
}

设置image-webpack-loader

1 个答案: