Webpack 5开发模式下Vue 3项目src/assets图片与SVG资源不加载如何配置？

配置问题根源 #

• 规则重复匹配：你同时配置了两条SVG处理规则，第一条包含图片+SVG的规则和单独的SVG规则冲突，Webpack会按顺序执行导致处理逻辑混乱
• 新旧资源处理能力混用：Webpack5已经内置了Asset Modules能力替代旧版的url-loader/file-loader/raw-loader，你同时配置了url-loader和type: 'asset/resource'，两者功能重叠导致配置失效
• 冗余拷贝配置：你在代码中直接引用的静态资源不需要手动用copy-webpack-plugin拷贝，Webpack打包时会自动处理依赖的资源，手动拷贝反而会导致路径冲突

修复步骤 #

1. 调整output配置，统一静态资源输出规则 #

output: {
  filename: 'index.js',
  path: path.resolve(__dirname, 'dist'),
  // 新增：统一配置静态资源输出路径
  assetModuleFilename: 'images/[name].[hash][ext][query]'
},

2. 替换资源处理规则 #

删掉原有module.rules中匹配图片和SVG的两条规则，替换为Webpack5内置的Asset Modules配置：

module: {
  rules: [
    // 保留原来的vue、css规则不动，只修改资源相关规则
    {
      test: /\.(png|jpe?g|gif|svg)$/i,
      // type: 'asset' 会自动判断资源大小，小于阈值转base64，大于阈值输出为单独文件
      type: 'asset',
      parser: {
        dataUrlCondition: {
          // 对应原来url-loader的limit配置，单位字节，10000就是10k
          maxSize: 10 * 1024
        }
      }
    },
    // （可选）如果你后续需要把SVG当做Vue组件使用，可以加上下面这个规则，注意要把上面规则里的svg去掉，避免重复匹配
    /*
    {
      test: /\.svg$/,
      loader: 'svg-sprite-loader',
      include: [path.resolve(__dirname, 'src/assets/icons')], // 只处理指定目录下的svg
      options: {
        symbolId: 'icon-[name]'
      }
    }
    */
  ]
},

3. 移除冗余拷贝规则 #

修改plugins配置，删掉copy-webpack-plugin里拷贝src/assets的规则，如果你有public目录下的静态资源需要拷贝，仅保留public的拷贝规则即可：

plugins: [
  // 其他插件保留不动，修改CopyPlugin配置
  new CopyPlugin([
    // 如果你有public目录下的资源需要拷贝，保留这个，否则可以直接删掉整个CopyPlugin
    { noErrorOnMissing: true, from: './public', to: './' },
  ]),
]

验证 #

修改配置后重启webpack serve，你组件里的<img src="../../assets/logo.svg" alt="logo" />即可正常加载。如果你的package.json里还有url-loader/file-loader依赖，可以直接移除，Webpack5内置能力已经覆盖了这些功能。

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