Webpack wepack编译后输出图像路径错误

Webpack wepack编译后输出图像路径错误,webpack,imageloader,Webpack,Imageloader,我已经在我的项目中使用了webpack。在编译存储在dist/img文件夹中但在css文件中的webpack背景图像后,它将显示dist/img/filename..因此图像加载不正确…如果图像路径../img/file它将起作用..我如何做到这一点 这是我的webpack.config.js文件 module.exports = (env = {}) => { return { entry: ['./src/js/app.js', './src/scss/main

我已经在我的项目中使用了webpack。在编译存储在dist/img文件夹中但在css文件中的webpack背景图像后,它将显示dist/img/filename..因此图像加载不正确…如果图像路径../img/file它将起作用..我如何做到这一点

这是我的webpack.config.js文件

module.exports = (env = {}) => {
    return {
        entry: ['./src/js/app.js', './src/scss/main.scss'],
        output: {
            filename: 'dist/js/app.js',
        },
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].css',
                                outputPath: 'dist/css/'
                            }
                        },
                        {
                            loader: 'extract-loader'
                        },
                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: 'postcss-loader'
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                },
                    {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    use: [
                        {
                            loader: "file-loader?name=[name].[ext]&outputPath=dist/img/"
                        }
                    ]
                }
            ]

        }
    }
};

您在输出和加载程序配置中犯了错误,请执行以下操作:

var path=require('path')

无论如何,您也可以使用
CopyWebpackPlugin
dist
中复制您的资产。
我希望这会有所帮助

如果您在输出和加载程序配置中出错,请执行以下操作:

var path=require('path')

无论如何,您也可以使用
CopyWebpackPlugin
dist
中复制您的资产。
我希望这会有帮助

不,它不起作用……现在,我已经编辑了我的答案。如果不起作用,请尝试“文件加载器”?name=dist/img/[name].[ext]。实际上,这取决于你如何管理你的文件夹结构和网页包构建配置。如果你可以共享你的网页包配置。这将非常棒。你会遇到什么错误?我对你的<代码>输出文件名没有错误…但是在dist文件夹外创建图像…现在我得到这个输出页脚{背景图像:url(img/img_bg1.jpg);}但我需要页脚{背景图像:url(../img/img_bg1.jpg)}输出和图像应该存储dist/img/img_bg1.jpg文件…但现在它是外部文件夹,你可以通过github共享它,以便我可以深入研究它。不,它不起作用…现在imgage在外部创建文件夹我已经编辑了我的答案。如果不起作用,请尝试“文件加载器?name=dist/img/[name].[ext]。实际上,这取决于你如何管理你的文件夹结构和网页包构建配置。如果你可以共享你的网页包配置。这将非常棒。你会遇到什么错误?我对你的<代码>输出文件名没有错误…但是在dist文件夹外创建图像…现在我得到这个输出页脚{背景图像:url(img/img_bg1.jpg);}但我需要页脚{背景图像:url(../img/img_bg1.jpg)}输出和图像应该存储dist/img/img_bg1.jpg文件……但现在它是外部文件夹。您可以通过github共享它,以便我可以深入研究它。
module.exports = (env = {}) => {
    return {
        entry: ['./src/js/app.js', './src/scss/main.scss'],
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist'),
            publicPath: '/'
        },
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].css',
                                outputPath: 'css/'
                            }
                        },
                        {
                            loader: 'extract-loader'
                        },
                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: 'postcss-loader'
                        },
                        {
                            loader: 'sass-loader'
                        }
                    ]
                },
                {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    loader: "file-loader?name=img/[name].[ext]"
                }
            ]

        }
    }
};