从Vue CLI 3中的原始图像创建webp图像（作为替代版本）

Question

我在最新的Vue CLI 3上有一个简单的Vue项目（我在这两方面都是新手）。在src中，我有100%质量的jpg/png图像。默认情况下，cli while build将使用my images创建dist目录，并添加哈希（image.jpg到image.7a97ca45.jpg），但不进行任何压缩。

所以我添加了imagemin网页包插件、imagemin mozjpeg和imagemin pngquant以获得优化。它是有效的。在dist，我现在有更小的jgp和png。

const ImageminPlugin = require('imagemin-webpack-plugin').default
const ImageminMozjpeg = require('imagemin-mozjpeg')
const ImageminPngquant = require('imagemin-pngquant')

module.exports = {
  configureWebpack: {
    plugins: [
      new ImageminPlugin({
        plugins: [
          ImageminMozjpeg({
            quality: 70
          }),
          ImageminPngquant({
            quality: '80-90'
          })
        ]
      })
    ]
  }
}

但是现在我还想从原始的jpg创建. webp图像。所以我应该得到例如image.7a97ca45.jpg和image.7a97ca45.jpg.webp（或image.7a97ca45.webp），这样我就可以检测浏览器和服务正确的格式。

但我不明白如何在vue中强制使用webpack。配置。js创建这些文件。例如，我尝试了imagemin webp webpack插件，但没有任何效果（“imagemin webp webpack插件：0 MB已保存-在控制台中”）。我还尝试将imagemin webp添加到imageminplugin配置中，但这也不起作用，因为我的源代码中没有原始webp，只想转换新的webp。

我能找到的关于webp的所有主题都是针对普通的webpack或较旧的vue cli的，我取得的最好成绩是通过优化复制整个images目录，或者从已经压缩的jpg（不是原始的）中创建webp图像。但我想保持所有散列等正常加载程序。什么是最好的方法呢？

Answer 1

回答我自己从2年的问题，因为它有一些观点。

如果将Nuxt与Vue一起使用，请使用Nuxt优化图像，对于图像路径，请使用查询？webp而不是。webp扩展。完成。

我使用的是Nuxt，我的答案是这样的，但它肯定可以在原始Vue上通过手动使用网页包加载程序来完成。

因此，有一个模块nuxt优化图像，它简单地结合了多个网页加载程序和imagemin以及各种格式的插件。如果您不使用Nuxt，甚至不使用Vue，那么只需在文档或源代码中签入依赖项，并手动安装/配置webp支持。

它有我们需要内置的webp加载程序。问题是，如何正确使用nuxt优化图像。我们不能简单地在代码路径图像中的某个地方键入。webp或图像。jpg。webp，因为webpack会抛出文件不存在的错误（这是我以前也遇到过的问题）。相反，我们需要使用query？文件路径中的webp，例如

如果你正在读这篇文章，那么你想支持这两种观点。webp和。jpg/。巴布亚新几内亚。2018年，这是正常的做法，因为这种格式仅由Chrome支持。但如今（2020年），几乎所有主流浏览器都能处理webp，包括微软（Edge）的一款。IE将永远不会支持它（但来吧…）Safari仍然落后，但在最新的Mac操作系统中也引入了它。随着时间的推移，覆盖面只能更大。那么，支持多种格式是否值得这么麻烦呢？卡尼努斯。通用域名格式。

对于每个站点来说，这不是最好的主意，但在你的场景中可能会考虑到这一点。假设我们有。jpg和。webp作为网站背景。我们真的需要吗。旧浏览器的jpg回退？也许仅仅在CSS中使用纯色作为后备方案将是更好/更容易/更快的解决方案？

但是，如果我们需要同时支持. webp和. jpg/. webp格式，那么可以通过检测用户代理、标头等在JS中以多种方式完成。这将是与Nuxt（SSR-服务器端渲染）的问题，所以最好的解决方案，将在任何地方工作（不仅仅是在Vue）是HTML5

<picture>
  <source srcset="@/assets/images/screen.png?webp" type="image/webp">
  <img src="@/assets/images/screen.png" alt="Screen">
</picture>