Webpack4迁移至Webpack5后SVG加载失效，废弃loader与插件替换方案求助

• 导入语句未适配asset/source的导出规则：raw-loader返回的是封装后的ES模块，需要通过.default取到svg内容，而webpack5内置的asset/source直接返回字符串格式的资源内容，不需要加.default属性，你当前代码里的导入语句未修改导致取值错误。
• 内置默认资源规则冲突：webpack5内置了默认的资源处理逻辑，对svg等媒体资源默认走asset/resource类型输出为独立文件，如果你自定义的svg规则优先级不够，会被默认规则覆盖导致不生效。
• 模板解析适配问题：HtmlWebpackPlugin处理模板时如果未指定正确的模板解析规则，模板中的require语句不会被webpack的loader链正确处理。

1. 调整HTML模板中的导入语句，删除多余的.default属性：

<button id="button" type="button">
  ${require('../../node_modules/open-iconic/<你的svg路径>')}
</button>

2. 调整webpack配置中的svg规则，明确优先级和输出逻辑：

module: {
  rules: [
    {
      test: /\.svg$/,
      type: 'asset/source',
      // 禁止生成独立的svg静态文件
      generator: {
        emit: false
      },
      // 可选：如果只需要处理html模板中导入的svg，加上issuer限制缩小规则范围，避免和其他svg处理逻辑冲突
      // issuer: /\.html$/
    }
  ]
}

3. 如果修改后仍不生效，可通过调整规则优先级避免冲突，给svg规则添加enforce: 'pre'属性让它优先于其他规则执行：

{
  test: /\.svg$/,
  type: 'asset/source',
  enforce: 'pre',
  generator: {
    emit: false
  }
}

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