老师，icons图片全都无法显示了

老师，我还没有开始拆分组件，只是把原来的code用webpack启动了一下，精灵图里的图标就都无法显示了，其他图片都正常，请问是什么原因呢？

我的电脑是mac

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 获取绝对路径
const resolve = dir => path.resolve(__dirname, dir);

module.exports = {
mode: 'development',
// Webpack 入口文件
entry: {
index: './src/pages/index/index.js'
},
// Webpack 输出路径
output: {
// 输出的目录
path: resolve('dist'),
// 输出的文件名
filename: 'js/[name].js'
},
devServer: {
static: "./"
},
// source-map，调试用的，出错的时候，将直接定位到原始代码，而不是转换后的代码
devtool: 'cheap-module-source-map',
resolve: {
// 自动补全（可以省略）的扩展名
extensions: ['.js'],
// 路径别名
alias: {
api: resolve('src/api'),
fonts: resolve('src/assets/fonts'),
images: resolve('src/assets/images'),
styles: resolve('src/assets/styles'),
components: resolve('src/components'),
pages: resolve('src/pages')
}
},
// 不同类型模块的处理规则
module: {
rules: [
// css
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 模板文件
{
test: /\.art$/,
loader: 'art-template-loader'
},
// 图片
{
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'url-loader',
options: {
// 小于 10K 的图片转成 base64 编码的 dataURL 字符串写到代码中
limit: 10000,
// 其他的图片转移到
name: 'images/[name].[ext]',
esModule: false
}
},
// 字体文件
{
test: /\.(woff2?|eot|ttf|otf)$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[ext]'
}
}
]
},
plugins: [
// 自动将依赖注入 html 模板，并输出最终的 html 文件到目标文件夹
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/pages/index/index.art'
})
]
};

{
"name": "mall",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"art-template-loader": "^1.4.3",
"css-loader": "^6.7.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"url-loader": "^4.1.1",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.0"
},
"dependencies": {
"art-template": "^4.13.2"
}
}