你如何处理使用 webpack 和服务器端渲染的缓存破坏 SVG 反应

Question

我需要内联SVG(目前使用<svg><use xlinkHref="icons.svg#info" /></svg>的精灵处理(和在CSS中用作背景的SVG(background-image: url(/assets/svg/info.svg);(。

我想实现文件名的哈希以帮助缓存破坏，这在 CSS 的情况下工作正常，使用以下方法：

{
  test:   /.svg$/i,
  loader: 'file-loader',
  query: {
    name: 'svg/[name]-[sha512:hash:base64:7].[ext]',
    publicPath: PATHS.public
  }
}

但是，我还希望能够内联引用各个 SVG 图标，同时确保源文件具有散列文件名。

有

没有人有万无一失的方法来实现两全其美？

最终，我想要一个SVG文件的源文件夹，在构建过程中是：

1. 单独对其文件名进行哈希处理
2. 全部编译为具有散列文件名的精灵，然后可用于<svg>标签？

谢谢担

Answer 1

事实证明，这里的问题相当简单，我没有在客户端和服务器 javascript 上运行 sass 加载器。

虽然我一直在解决这个问题，但我一直在保留一个单独的演示存储库，以便为服务器和客户端使用 Webpack 渲染的 React 构建一个良好的起点，并为资产提供一套良好的生产就绪处理。

https://github.com/danielrosewarne/webpack-demo

希望对您有所帮助！