使用Webpack处理CSS background-image的url路径时图片不显示问题

问题根源 #

你当前的配置存在3个核心错误：

1. loader配置顺序错误：webpack的loader执行顺序为从右到左，你同时配置了url-loader和file-loader且顺序写反，导致图片被两次处理生成无效文件，就是你看到的小白块。
2. devServer静态资源路径配置不全：仅配置了src作为静态资源目录，项目根目录下的static目录和打包后的dist目录都不在devServer的静态资源查找范围内，即使路径写对也访问不到。
3. 资源处理逻辑冲突：既配置了loader处理图片资源，又用CopyWebpackPlugin复制整个static目录，导致同一份图片被输出两次，路径匹配混乱。

方案1：保留loader处理图片（推荐，可做图片压缩、hash命名等优化） #

这种方案不需要CopyWebpackPlugin，直接让loader处理所有图片资源：

1. 先卸载不需要的依赖：npm uninstall copy-webpack-plugin url-loader，webpack5已经内置资源模块，不需要额外安装url-loader、file-loader。
2. 修改webpack配置：

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "dist"),
    filename: "index.bundle.js",
    // 配置静态资源输出路径
    assetModuleFilename: 'static/images/[name][ext][query]'
  },
  mode: process.env.NODE_ENV || 'development',
  resolve: { 
    modules: [path.resolve(__dirname, "src"), "node_modules"],
  },
  devServer: {
    static: [path.join(__dirname, 'src'), path.join(__dirname, 'dist')]
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: path.join(__dirname, "src", "index.html"),
    }),
  ],
  module: {
    rules: [
        { 
            test: /\.(js|jsx)$/, 
            exclude: /node_modules/, 
            use: ["babel-loader"] 
        },
        {
            test: /\.(css)$/,
            use: ["style-loader", "css-loader"],
        },
        {
          test: /\.(jpg|png|svg|gif)$/,
          // 用内置资源模块替代url-loader/file-loader
          type: 'asset',
          parser: {
            dataUrlCondition: {
              // 小于8k的图片转base64，大于的输出为文件
              maxSize: 8 * 1024
            }
          }
        },
    ],
},
}

3. css里的路径保持当前的相对路径即可，loader会自动解析为正确的打包后路径。

方案2：保留CopyWebpackPlugin，static目录资源不经过loader处理 #

适合静态资源不需要webpack做处理，直接复用原路径的场景：

1. 修改webpack的loader配置，排除static目录的图片不被loader处理：

{
  test: /\.(jpg|png|svg|gif)$/,
  exclude: path.resolve(__dirname, 'static'),
  type: 'asset',
  parser: {
    dataUrlCondition: {
      maxSize: 8 * 1024
    }
  }
}

2. 修改devServer配置，加上static目录的映射：

devServer: {
  static: [
    path.join(__dirname, 'src'), 
    path.join(__dirname, 'dist'),
    // 把/static路径映射到项目根目录的static文件夹
    {
      directory: path.join(__dirname, 'static'),
      publicPath: '/static'
    }
  ]
}

3. 修改css里的背景图路径为绝对路径，避免css-loader解析，同时给容器设置宽高：

.container {
  background-image: url('/static/public/images/my-background.jpg');
  width: 100vw;
  height: 100vh;
  background-size: cover;
}

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