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

Question

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

Версии:

• "nuxt": "^ 2.3.4"
• "responseive-loader": "^1.2.0 "
• " sharp ":" ^ 0.21.1 "

Я нашел несколько решений, как это сделать (https://stackoverflow.com/a/51982357/8804871), но это не работает дляme. Когда я запускаю npm, запустите сборку , я получаю сообщение об ошибке: "Ошибка типа: невозможно установить свойство 'exclude' of 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: Невозможно установить свойство 'exclude' из неопределенного".

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

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';

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