在SCSS中加载图像使用webpack

Question

所以我开始使用webpack和scss作为我的反应应用程序。我有一个包含我所有应用程序图像文件的图像文件夹。当我尝试将背景图像div设置为像

这样的网址时，我注意到了

background-image: url("../images/bg1.jpeg");

它没有被设置，我得到一个错误，如“未知模块，可能需要一个加载器”或webpack的东西。所以我继续前进并获得文件加载器，我的webpack配置现在看起来像这样：

的WebPack

....

module: {
            loaders: [{
                    test: /.jsx?$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    query: {
                        presets: ['es2016', 'react']
                    }
                },
                { // regular css files
                    test: /\.scss$/,
                    loader: 'style-loader!css-loader!sass-loader'
                },
                {
                    test: /\.jpe?g$|\.gif$|\.png$/i,
                    loader: "file-loader?name=/img/[name].[ext]"
                }
            ]
        }

所以现在我注意到我的src文件中有两个文件夹。一个是images/，我的应用程序获得了一堆图像。还有一个img/文件夹，它保存了我在scss auto中请求的图像，生成了我认为的文件加载行。

问题是，在我的scss中它仍然指向图像/文件夹，所以如果它永远不会被指向，为什么以及如何使用其他img /文件夹。我删除了该文件夹并立即注意到没有它我的图像将无法加载。

这是怎么回事？我是否需要两者，如果是这样，为什么我的scss仍然需要我的原始图像/文件夹URL？

这一切对我来说真的很混乱。