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

Question

我正在尝试在 webpack 级别解决 css-modules全局与本地 css 问题。

我现在最好的解决方案是标记文件并在它们上运行不同的加载器，这在现实世界的项目中使用起来很乏味。

{
      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. 从 git 的角度来看，比一直重命名文件要好
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 loader 有条件地生成模块：

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