Home

Hello folks, I was reading this ticket here #907 and I saw you already created a example to extend and increase the limit size for images.

I was more comfortable with the old way to change loaders because is almost the same synthax I was using in other Vue.js projects.

Right now, what is the best way to replace a rule? Example: I want change some url-loader but for fonts. OR I can change the whole vue-style-loader set.

This is my extend fn() right now:

    extend(config, ctx) {
      // console.log(config, ctx);

      /*
      ** Sourcemaps
      */
      if (ctx.dev) {
        config.devtool = (ctx.dev ? 'eval-source-map' : false);
      }

      /*
      ** Loaders
      */
      // console.log(config.module.rules);
      const urlLoader = config.module.rules.find(loader => loader.loader === 'url-loader');
      // Increase limit to 100KO
      urlLoader.query.limit = 100000;
      // Change hash quantity
      urlLoader.query.name = 'images/[name].[hash:5].[ext]';

      /*
      ** Run ESLINT on save
      */
      if (ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
        });
      }
    },