Отзывчивый загрузчик с nuxt.js

Question

Я хочу интегрировать responseive -loader в мой проект Nuxt.js, который работает в режиме SPA. (Необязательно, я хочу добавить поддержку Vuetify Progressive Image). Это будет статический хостинг с Netlify.

Версии:

• "nuxt": "^ 2.3.4"
• "Отзывчивый загрузчик": "^ 1.2.0"
• "sharp": "^ 0.21.1"

Я нашел несколько решений, как это сделать ( /questions/33781765/kak-izmenit-razmer-izobrazheniya-dlya-raznyih-adaptivnyih-prosmotrov/33781780#33781780), но это не работает для меня. Когда я запускаю npm run build, я получаю сообщение об ошибке: "TypeError: Невозможно установить свойство" exclude "из undefined"

Мой раздел сборки выглядит следующим образом:

build: {
    transpile: [/^vuetify/],
    plugins: [
  new VuetifyLoaderPlugin()
],

extractCSS: true,
/*
 ** Run ESLint on save
 */
extend(config, { isDev, isClient, isServer }) {
  // Default block
  if (isDev && isClient) {
    config.module.rules.push({
      enforce: 'pre',
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      exclude: /(node_modules)/
    })
  }

  if (isServer) {
    config.externals = [
      nodeExternals({
        whitelist: [/^vuetify/]
      })
    ]
  }
  // Default block end

  // here I tell webpack not to include jpgs and pngs
  // as base64 as an inline image
  config.module.rules.find(
    rule => rule.loader === "url-loader"
  ).exclude = /\.(jpe?g|png)$/;
  /*
  ** Configure responsive-loader
  */
  config.module.rules.push({
    test: /\.(jpe?g|png)$/i,
    loader: "responsive-loader",
    options: {
      min: 350,
      max: 2800,
      steps: 7,
      placeholder: false,
      quality: 60,
      adapter: require("responsive-loader/sharp")
    }
  });
}
}

Ошибка, вероятно, найдена в этом разделе:

config.module.rules.find(
    rule => rule.loader === "url-loader"
).exclude = /\.(jpe?g|png)$/;

Как сказал, я получаю это сообщение об ошибке: "TypeError: Невозможно установить свойство" исключить "из неопределенного".

Я запускаю этот проект вместе с Vuetify. Я также хотел бы включить поддержку изображений Progressive вместе с отзывчивым загрузчиком. Кто-нибудь знает, как настроить оба правила вместе? https://github.com/vuetifyjs/vuetify-loader

Answer 1

Самый простой способ интегрировать responseive-loader в проект Nuxt.js - использовать этот модуль: https://www.npmjs.com/package/nuxt-responsive-loader

Отказ от ответственности: я создал модуль

Answer 2

Проблема с вашим конфигом в том, что он зависит rule.loader свойство, но правило может быть определено в use или же oneOf разделы конфигурации также.
Еще одна проблема заключается в том, что внутренняя конфигурация Nuxt имеет несколько правил: url-loader(для изображений, видео, шрифтов...).

В вашем случае правило, которое вы пытались найти, имеет use раздел и url-loader определяется там, поэтому ваш find Функция ничего не нашла и выкинула эту ошибку:

{
    "test": /\.(png|jpe?g|gif|svg|webp)$/,
    "use": [{
        "loader": "url-loader",
        "options": {
            "limit": 1000,
            "name": "img/[hash:7].[ext]"
        }
    }]
}

Что касается отзывчивого загрузчика, вы должны удалить расширения, которые хотите обработать responsive-loader от url-loader Правило, чтобы избежать неожиданного поведения и конфликтов, вот extend Пример работы функции:

extend(config, ctx) {
  let imgTest = '/\\.(png|jpe?g|gif|svg|webp)$/';
  // find by reg ex string to not rely on rule structure
  let urlRule = config.module.rules.find(r => r.test.toString() === imgTest);

  // you can use also "oneOf" section and define both loaders there.
  // removed images from url-loader test
  urlRule.test = /\.(svg|webp)$/;

  config.module.rules.push({
    test: /\.(png|jpe?g|gif)$/,
    loader: "responsive-loader",
    options: {
      // place generated images to the same place as url-loader
      name: "img/[hash:7]-[width].[ext]",
      min: 350,
      max: 2800,
      steps: 7,
      placeholder: false,
      quality: 60,
      adapter: require("responsive-loader/sharp")
    }
  })
}

Да, это выглядит грязно, но я думаю, что пока единственный способ поменять загрузчик.

Что касается vuetify - я думаю, что оба загрузчика будут конфликтовать друг с другом, и, вероятно, решение состоит в том, чтобы использовать один загрузчик, который будет работать с вашими изображениями.

Надеюсь, поможет.

Обновление для Nuxt >= 2.4.0:

Они изменили массив правил, обновите следующую строку:

let imgTest = '/\\.(png|jpe?g|gif|svg|webp)$/i';

Тогда код должен снова работать нормально.