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

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')

这很冗长，但是

显式，以后可以配置(localByDefault/globalByDefault)
从git的角度来看，总比重命名文件好
同一个文件可以有不同的处理方式

所以我的问题是：

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

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

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

Is it possible to conditionally apply different loaders, depending on different query params?

webpack

css-modules