Webpack加载器别名？

Question

我有一个相当复杂的样式表加载器设置：

  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract("style",
      "css?sourceMap&localIdentName=[path][name]__[local]__[hash:base64:5]!sass?outputStyle=expanded&" +
      "includePaths[]=" + other stuff)
    )
  }

这很好用，但在某些情况下，我想要在css-loader中添加modules选项，看起来像这样：

require('./foo.scss!css?modules&sourceMap&localIdentName=[path][name]__[local]__[hash...');

但我不能在所有地方都这样做。

如何配置使我能够在保持其余部分不变的情况下，在某些需要中启用css-loader模块标志？

也许像一个加载器“别名”，例如 require('./foo.scss!my-scss-with-modules-flag-alias')?

我能想到的唯一解决方案是编写一个加载器，对某些要求调用进行语法转换以将加载器配置嵌入其中...但这很脆弱和复杂。

- Brigand

Answer 1

resolveLoader.alias在这里起作用。即。

resolveLoader: {
    alias: {
        'with-modules': 'loader definition goes here',
    }
}

使用这个配置，您可以轻松地完成

require('with-modules!./foo.scss');

看你的代码。

- Juho Vepsäläinen

---

你是怎么得出这个解决方案的？Webpack很棒，但我对文档感到困扰... - Carlos Morales

嗯，我正在编写与webpack相关的书籍，所以了解这些是我的工作之一。我已经在文档中添加了有关此事的注释，因为先前缺少了这一点。我同意文档可能有点晦涩难懂。 - Juho Vepsäläinen

@JuhoVepsäläinen: 你能详细说明一下你的答案吗？定义中会放什么？ 如果我尝试使用"style!css?modules!postcss"创建别名，我会收到一个错误：无法解析模块'style!css'。 - Jacob T. Nielsen

据我所知，您只能为加载器名称设置别名，而不能像那样设置链。我之前尝试过为链设置别名，但失败了。我甚至因此开了一个问题，因为这将非常方便。 - Juho Vepsäläinen

Answer 2

如果您使用的是插件作为加载器，则resolveLoader.alias可能在给定情况下起作用。但是，如果您需要使用一系列加载器，则无法正常工作（有一个功能请求：https://github.com/webpack/webpack/issues/2772）。

相反，您可以在require语句中为文件添加参数。

var styles = require('./foo.scss?modules');

并创建一个新的加载器规则：

module: {
    loaders: [
        ...
        { test: /\.scss$/, loader: 'style!css!postcss!sass' },
        { test: /\.scss\?modules$/, loader: 'style!css?modules!postcss!sass' }
    ]
}

- Jeppe Stougaard

---

无法使用Webpack 3使其正常工作。它总是选择第一个加载器，就好像忽略了查询参数一样。 - Ryall