Question

是否可以为同一个扩展名运行两个单独的加载链？

在我的情况下，我想运行一组加载器来构建一个静态文件，另一组用来编写一组不同的文件（用于服务器端渲染）

  {
    test: /\.p?css$/,
    use: ExtractTextPlugin.extract([ "css-loader", "postcss-loader" ]),
  },
  {
    test: /\.p?css$/,
    use: [  
      {
        loader: "emit-file-loader",
        options: {
          name: "dist/[path][name].pcss",
        },
      },
      {
        loader: "skeleton-loader",
        options: {
          procedure: function (content) {
            return `module.exports = ${content}`
          },
        },
      },
      "postcss-loader",
    ]),
  }

但根据What is the loader order for webpack?，它似乎在同一个链中运行所有加载器，即使它们是在不同的规则中定义的。

也许我并不完全了解加载器，但有没有办法让每组加载器（use列表）独立运行？

Answer 1

我发现装载机女巫是最适合您的情况 multi loader。这个加载器需要多次模块，每次加载不同的加载器。与多入口点一样，导出最后一个项目的导出。

var multi = require("multi-loader");
{
    module: {
        loaders: [
            {
                test: /\.css$/,
                // Add CSS to the DOM
                // and
                // Return the raw content
                loader: multi(
                    "style-loader!css-loader!autoprefixer-loader",
                    "raw-loader"
                )
            }
        ]
    }
}

或者您可以在this

等需要声明中使用内联加载器两次请求相同的文件

import Styles from 'style-loader!css-loader?modules!./styles.css';
import Styles from 'xyz-loader!sass-loader?modules!./styles.css';

您可以将configration选项作为查询传递。

此外，您可以为loader-name和configration创建别名，并使用每次写入loader-name和configration的内容

配置文件中的

resolveLoader: {
  alias: {
    myLoader1: "style-loader!css-loader?modules", // and much more
    myLoader2: "xyz-loader!sass-loader?modules" // and much more
  }
}

导入

import Styles from 'myLoader1!./styles.css';
import Styles from 'myLoader2!./styles.css';

Answer 2

您可以在每条规则上使用正则表达式include and exclude个文件。

在文档的Condition部分中，它们列出了这些属性接受的一些可能值。在这里，我认为可以帮到你：

字符串：要匹配输入，必须以提供的字符串开头。 I. e。绝对目录路径或文件的绝对路径。

RegExp：使用输入进行测试。

一个函数：它是用输入调用的，必须返回一个匹配的真值。

我在项目中使用了RegExp方法，将特殊文件夹中的特殊情况分开。因此，在webpack配置中，我将文件夹包含在一组规则中，并从另一组规则中排除。例如：

Libc

Webpack将相同文件类型的加载器链分开

2 个答案: