Webpack生产构建图片无法显示，仅开发环境正常（含sass-loader）

这种开发环境正常、生产构建后图片找不到的情况，我碰到过好多次，大概率是路径配置或者copy-webpack-plugin的使用细节出了问题，咱们一步步来排查：

1. 先检查copy-webpack-plugin的配置是否正确 #

你说已经加了这个插件，但可能路径匹配或者输出配置没写对。比如：

• 如果你只想复制src/img下的所有文件（包括子目录里的），from要写匹配规则，而不是只写文件夹路径；
• to的路径要和你期望的输出目录对应，比如要输出到dist/img，得确保路径正确。

正确的配置示例：

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...其他webpack配置
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          // 匹配src/img下所有文件和子目录
          from: path.resolve(__dirname, 'src/img/**/*'),
          // 输出到dist/img目录下，保持原文件结构
          to: path.resolve(__dirname, 'dist/img/[path][name][ext]')
          // 如果你的output.path已经设为dist，也可以简化成：to: 'img/[path][name][ext]'
        }
      ]
    })
  ]
};

如果之前只写了from: 'src/img'，插件只会复制img文件夹本身，不会复制里面的文件，这就会导致dist/img是空的，自然找不到图片。

2. 修正Webpack的output.publicPath配置 #

生产构建后如果是本地用file://打开index.html，绝对路径会出问题——比如你写的/img/featured.png，浏览器会去磁盘根目录找img文件夹，而不是dist文件夹里的img。

解决方法是把publicPath设为相对路径：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    publicPath: './' // 关键！本地打开用相对路径
  }
};

3. 修正HTML和CSS里的图片引用路径 #

把所有图片引用的绝对路径（开头带/）改成相对路径：

• HTML里的<img src="/img/featured.png"> → <img src="./img/featured.png">
• CSS里的background-image: url('/img/header-img1-1.jpg') → background-image: url('./img/header-img1-1.jpg')

如果用了html-webpack-plugin，确保你的模板文件里的路径已经改成相对的，插件会自动处理打包后的路径关联。

4. 排查是否和Webpack资源模块冲突 #

如果你同时配置了Webpack的asset资源模块（比如type: 'asset/resource'）来处理图片，那copy-webpack-plugin可能就多余了，甚至会导致重复输出或者路径混乱。

这种情况下，你可以移除copy-webpack-plugin，直接用asset模块处理：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          // 指定输出到dist/img目录
          filename: 'img/[name][ext]'
        }
      }
    ]
  }
};

Webpack会自动把HTML和CSS里的图片引用替换成打包后的正确路径，不用手动复制文件。

按照上面的步骤排查，应该就能解决图片找不到的问题了。

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