title: responsive-loader with nuxt.js
body: <p>I want to integrate <a href="https://github.com/herrstucki/responsive-loader" rel="nofollow noreferrer">responsive-loader</a>  into my Nuxt.js project which runs in SPA mode. (Optional I want to add Vuetify Progressive Image support also).
  It will be a static hosting with Netlify.</p>
  
  <p>Versions:</p>
  
  <ul>
  <li>"nuxt": "^2.3.4"</li>
  <li>"responsive-loader": "^1.2.0"</li>
  <li>"sharp": "^0.21.1"</li>
  </ul>
  
  <p>I found some solutions how to do it (<a href="https://stackoverflow.com/a/51982357/8804871">https://stackoverflow.com/a/51982357/8804871</a>) but this is not working for me.
  When I run <strong>npm run build</strong>
  I get an error message: <strong>"TypeError: Cannot set property 'exclude' of undefined"</strong></p>
  
  <p>My build section looks the following:</p>
  
  <pre><code>build: {
      transpile: [/^vuetify/],
      plugins: [
    new VuetifyLoaderPlugin()
  ],
  
  extractCSS: true,
  /*
   ** Run ESLint on save
   */
  extend(config, { isDev, isClient, isServer }) {
    // Default block
    if (isDev &amp;&amp; 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 =&gt; 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")
      }
    });
  }
  }
  </code></pre>
  
  <p>The error is probably found in this section:</p>
  
  <pre><code>config.module.rules.find(
      rule =&gt; rule.loader === "url-loader"
  ).exclude = /\.(jpe?g|png)$/;
  </code></pre>
  
  <p>Like said I get this error message: <strong>"TypeError: Cannot set property 'exclude' of undefined"</strong>.</p>
  
  <p>I run this project along with vuetify. I also would like to enable the Progressive image support together with responsive loader. Does anybody know how to setup both rules together?
  <a href="https://github.com/vuetifyjs/vuetify-loader#progressive-images" rel="nofollow noreferrer">https://github.com/vuetifyjs/vuetify-loader#progressive-images</a></p>