Vue项目中如何配置Webpack避免重复打包未变更的静态图片？

首先，咱们先搞清楚为什么会出现你说的这些问题：Webpack 默认会把所有在 Vue 模板、样式里引用的图片，以及通过代码导入的资源都视为构建依赖。如果没配置资源缓存或者合理的处理规则，每次哪怕只改一行 JS 代码，Webpack 都会重新遍历所有依赖的图片资源，重新复制一遍——这确实挺浪费时间的。

接下来咱们一步步解决这个问题，同时聊聊这种优化方式是否值得推荐：

一、配置 Webpack 只打包变更的图片资源 #

1. 给资源 loader 开启缓存 #

不管你用 file-loader 还是 url-loader，都可以通过开启缓存选项，让 Webpack 记住已经处理过的图片，只有当图片内容真正变化时才重新处理。

比如这样配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              // 用内容哈希命名，确保文件变更时文件名更新，避免浏览器缓存旧资源
              name: '[name].[contenthash].[ext]',
              outputPath: 'images/',
              cacheDirectory: true, // 关键：开启缓存
            },
          },
        ],
      },
    ],
  },
};

开启 cacheDirectory 后，Webpack 会把处理过的图片缓存到临时目录里，下次构建时对比文件内容，只有变化的文件才会重新复制到 dist 目录。

2. 分离手动管理的静态资源 #

对于那些不需要 Webpack 处理（你需要手动复制的）图片，建议把它们放到单独的目录，比如 public/images，然后用绝对路径在 Vue 里引用（比如 <img src="/images/xxx.png">）。同时用 copy-webpack-plugin 来复制这些资源，并且开启缓存：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public/images',
          to: 'images',
          cache: true, // 只复制变更的文件
          // 可选：如果需要过滤文件，可以加 globOptions
          globOptions: {
            ignore: ['**/.DS_Store'], // 忽略系统隐藏文件
          },
        },
      ],
    }),
  ],
};

这个插件会自动对比源文件和目标文件的修改时间或内容哈希，只复制有变化的文件，不会每次都全量复制。

二、这种做法是否推荐？ #

绝对推荐！ 这是 Webpack 构建优化里非常基础且有效的手段：

• 大幅提升构建速度：减少了大量不必要的文件复制操作，尤其是项目里有大量静态资源时，效果特别明显。
• 更清晰的资源管理：把需要 Webpack 处理的组件内资源（和组件强关联的图片），以及全局静态资源（比如网站 logo、固定背景图）分开管理，逻辑更清晰。
• 避免浏览器缓存问题：通过 contenthash 命名，当图片真的变更时，文件名会更新，浏览器会自动加载新资源，不会用旧缓存。

注意事项 #

• 如果你用的是 vue-cli 而不是手动配置 Webpack，可以在 vue.config.js 里通过 chainWebpack 来设置 loader 缓存，或者配置 pluginOptions 来添加 copy-webpack-plugin。
• 确保不要混淆两种资源的引用方式：组件内的图片用相对路径（让 Webpack 处理），全局静态资源用绝对路径（让 copy-webpack-plugin 复制）。

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