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

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",
    ]),
  }

但是根据webpack的加载器顺序是什么？它似乎在同一个链中运行所有加载器,即使它们是在单独的规则中定义的.

也许我不完全理解装载机,但有没有办法让每组装载机(use列表)独立运行？

Answer 1

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

在文档的“条件”部分中，他们列出了这些属性接受的一些可能值。我认为以下一些可以帮助您：

• 字符串：要匹配输入，必须以提供的字符串开头。IE。绝对目录路径或文件的绝对路径。
• 正则表达式：它使用输入进行测试。
• 函数：使用输入调用它，并且必须返回一个匹配的真值。

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

{
  test: /\.p?css$/,
  include: /specific_folder/,
  use: ExtractTextPlugin.extract([ "css-loader", "postcss-loader" ])
},
{
  test: /\.p?css$/,
  exclude: /specific_folder/,
  use: [  ... ]
}