是否可以有條件地應用不同的裝載器，具體取決於不同的查詢參數？

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