是否可以有条件地应用不同的装载器，具体取决于不同的查询参数？

Question

我试图解决在webpack级别的css模块global vs local css issue。

我现在最好的解决方案是标记文件并在其上运行不同的装载机，这在现实世界的项目中非常繁琐。

{ 
     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' 
} 

比方说，我有文件styles.css的

某处在应用程序代码中，我想这样写：

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

这是详细，但

1. 明确，并可以稍后配置（localByDefault/globalByDefault）
2. 更好比但从混帐点
3. 相同的文件可以被不同的处理重命名文件的所有时间

所以我的问题是：

是否可以有条件地应用不同的装载机，根据不同的查询参数？

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

解决办法是有条件使用pitch加载器来生成模块：

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}")`; 
    } 
}