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)/,
});
}
},
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1174">#c1174</a>)</em></sub></div>