Est-il possible d'appliquer de manière conditionnelle différents chargeurs, en fonction de différents paramètres de requête?

Question

J'essaie de résoudre les css-modules global vs local css issue au niveau du webpack.

La meilleure solution que j'ai en ce moment est d'étiqueter des fichiers et d'exécuter différents chargeurs, ce qui est fastidieux à utiliser dans un projet réel.

{ 
     test: /\.module.less$/, 
     loader: 'style-loader!css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!less-loader' 
} 
{ 
     test: /^((?!\.module).)*less$/, 
     loader: 'style!css!less' 
} 

Disons que j'ai fichier styles.css

Quelque part dans le code de l'application que je veux écrire ceci:

var localCss = require('magicCSSLoader?local!./styles.css') 
require('magicCSSLoader?global!./styles.css') 

Ceci est bavard, mais

1. explicite et peut être configuré plus tard (localByDefault/globalByDefault)
2. mieux que renommer des fichiers tout le temps du point de vue git
3. le même fichier peut être traité différemment

Ma question est la suivante:

Est-il possible d'appliquer certaines conditions différentes chargeurs, en fonction de différents paramètres de requête ?

loader: function(content, query) { 
     if(query.local) { 
      return webpackMagic(content, 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]') 
     } 
      return webpackMagic(content, 'style!css'); 
     } 

Answer 1

La solution serait de générer module à l'aide conditionnelle pitch chargeur:

var loaderUtils = require('loader-utils') 

module.exports.pitch = function(remainingRequest) { 
    var query = loaderUtils.parseQuery(this) 
    if (query.local) { 
    return `modules.exports = require("!!style!css?modules!${remainingRequest}")`; 
    } else { 
    return `modules.exports = require("!!style!css!${remainingRequest}")`; 
    } 
}