Создание изображений webp (в качестве альтернативной версии) из исходных изображений в Vue CLI 3 - PullRequest
Новая
       13

Создание изображений webp (в качестве альтернативной версии) из исходных изображений в Vue CLI 3

0 голосов
/ 02 ноября 2018

У меня есть простой проект Vue на новейшем Vue CLI 3 (я новичок в обоих). В src у меня есть изображения jpg / png в 100% качестве. По умолчанию cli, в то время как build создает каталог dist с моими изображениями, добавляя хеш (image.jpg к image.7a97ca45.jpg), но без сжатия.

Итак, я добавил imagemin-webpack-plugin и 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'
          })
        ]
      })
    ]
  }
}

Но теперь я хочу, чтобы изображения .webp создавались из оригинальных jpg. Так что я должен получить, например, image.7a97ca45.jpg и image.7a97ca45.jpg.webp (или image.7a97ca45.webp), чтобы я мог определить браузер и предоставить правильный формат.

Но я не понимаю, как я могу заставить webpack в vue.config.js создавать эти файлы. Я пробовал, например, imagemin-webp-webpack-plugin, но это ничего не делает («imagemin-webp-webpack-plugin: 0 МБ сохранено - в консоли»). Я также попытался добавить imagemin-webp в конфигурацию imageminplugin, но это также не работает, потому что у меня нет исходного webp в моем источнике, я просто хочу конвертировать новый.

Все темы, которые я мог найти о webp, были посвящены обычному webpack или более старому vue-cli, и лучшее, чего я достиг, - это копирование целого каталога изображений с оптимизацией или создание изображений webp из уже сжатых файлов jpg (не оригиналов). Но я хочу сохранить нормальный загрузчик со всеми хэшированием и т. Д. Какой лучший подход к этому?

...