Webpack构建项目提示无法解析styles.css中的image.png如何解决

• 路径引用错误：从项目结构可知，你的main.css存放在src/assets/styles/目录下，原代码中../assets/images/bg.png的路径会解析为src/assets/assets/images/bg.png，多嵌套了一层assets目录，导致资源找不到。
• Webpack配置冲突：Webpack5内置的asset/resource已经完全覆盖了url-loader的静态资源处理能力，同时配置两者会触发重复处理逻辑，导致资源解析失败。
• 资源匹配规则缺陷：正则中仅匹配大写的JPG后缀，小写的jpg格式图片会匹配失败，且规则中重复定义了gif后缀，存在冗余。

1. 修正CSS资源路径
   将main.css中的背景图路径改为：

.b-promo {
  background: url(../images/bg.png) top no-repeat;
  background-size: cover
}

2. 修正Webpack配置
   删除图片规则中的url-loader配置，优化匹配正则，修改后的规则如下：

{
  test: /\.(jpe?g|gif|svg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
  type: 'asset/resource',
  generator: {
    filename: 'assets/images/[name].[contenthash:7][ext]'
  }
},

末尾加的i代表忽略大小写，可同时匹配大写/小写的图片后缀。

3. 可选优化：配置路径别名避免相对路径出错
   如果不想手动计算相对路径层级，可以在webpack.config.js中添加别名配置：

const path = require('path')
module.exports = {
  // 其他配置保持不变
  resolve: {
    alias: {
      '@assets': path.resolve(__dirname, 'src/assets')
    }
  }
}

之后CSS中引用资源可以直接写：

background: url(~@assets/images/bg.png) top no-repeat;

前缀~是为了让css-loader识别该路径为Webpack别名，而非普通相对路径。

内容的提问来源于stack exchange，提问作者Edward