如何使用Webpack 4加载图像？

我正在尝试在我的网页包项目中加载图像。但是当我启动dev服务器时，没有找到它们，我得到以下错误：

加载资源失败：服务器以404（未找到）的状态响应。

我还想将它们包含在我的

dist

文件夹中，该文件夹名为

img

，但我不知道如何才能不破坏所有内容

我尝试过在网上找到的不同方法，但都不管用

我的文件夹结构：

- config (all my webpack config files)
- src
  |- fonts
  |- img
  |- javascript
  |- scss
  |- index.html

这是我的

webpack.base.config.js

const path=require（'path'）；
const HtmlWebpackPlugin=require（'html-webpack-plugin'）；
const MiniCssExtractPlugin=require（'mini-css-extract-plugin'）；
const WebpackAssetsManifest=require（'webpack-assets-manifest'）；
var DashboardPlugin=require（'webpack-dashboard/plugin'）；
module.exports={
// https://webpack.js.org/concepts/entry-points/#multi-页面应用程序
条目：{
索引：'./src/javascript/index.js'，
home:“./src/javascript/chunks/home.js”，
关于：'./src/javascript/chunks/about.js'，
项目：'./src/javascript/chunks/projects.js'
},
输出：{
path:path.resolve（_dirname，../dist'），
文件名：'index.[contenthash:8].js'，
chunkFilename:'[id]-[chunkhash].js',，
公共路径：'/'
},
开发服务器：{
开放：是的
},
// https://webpack.js.org/concepts/loaders/
模块：{
规则：[
{
测试：[/.js$|.ts$/]，
排除：/（节点\模块）/，
使用：{
加载器：“巴别塔加载器”，
选项：{
预设：['@babel/typescript'，'@babel/preset env']
}
}
},
{
测试：/\.svg$/,，
加载程序：“svg url加载程序”，
选项：{
没错
}
},
{
测试：/\（gif | png | jpe？g | svg）$/i，
排除：/font/，
使用：[
“文件加载器”，
{
加载器：“图像网页包加载器”，
选项：{
bypassOnDebug:true，//webpack@1.x
禁用：true//webpack@2.x更新的
}
}
]
},
{
测试：[/.css$|.scss$/]，
包括：[path.resolve（_dirname，“../src/scss/”）]，
使用：[
{loader:MiniCssExtractPlugin.loader}，
{loader:'css loader'}，
{loader:'sass loader'}，
{loader:'postsss loader'}
]
},
{
测试：/\（woff | woff2 | ttf | otf | eot）$/，
使用：[
{
加载器：“文件加载器”，
选项：{
outputPath:'fonts/'
}
}
]
}
]
},
决心：{
别名：{
“@scss”：path.resolve（_dirname，../src/scss”），
“@img”：path.resolve（_dirname，../src/img”），
“@fonts”：path.resolve（_dirname，../src/fonts”），
“@”：path.resolve（_dirname，../src”）
},
模块：['node_modules'，path.resolve（_dirname，../src'），
扩展名：['.js'、'.jsx'、'.scss'、'.gif'、'.png'、'.jpg'、'.jpeg'、'.svg']
},
// https://webpack.js.org/concepts/plugins/
插件：[
新的WebpackAssetsManifest({
//选项在这里
}),
新的仪表板插件({
//选项在这里
}),
新的MinicsSextract插件({
文件名：'app.[contenthash:8].css'，
chunkFilename:“[id].css”
}),
新HtmlWebpackPlugin({
模板：'./src/index.html'，
是的，
块：['index'，'home']，
缩小：{
removeComments：对，
collapseWhitespace：true
},
文件名：“index.html”
}),
新HtmlWebpackPlugin({
模板：'./src/about.html'，
是的，
块：['index'，'about']，
缩小：{
removeComments：对，
collapseWhitespace：true
},
文件名：“about.html”
}),
新HtmlWebpackPlugin({
模板：'./src/projects.html'，
是的，
块：['index'，'projects']，
缩小：{
removeComments：对，
collapseWhitespace：true
},
文件名：“projects.html”
})
]
};

在我的html中，我这样调用图像：

在我的scss文件中，我这样调用图像：

url（../img/arrow\uuuu top-right\uuuu outline\uuuuu yellow.svg）

（我使用

。/img/

，因为我的文件在我的

scss

文件夹中，所以我向上移动一个文件夹以获得我的

src/img/

文件夹..对吗？）