Question

来自docs：

一系列装载机按时间顺序编译。第一个装载机加载器链将值返回到下一个。

让我们采取以下webpack配置，例如。

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader'},
          { loader: 'css-loader'}
        ]
      }
    ]
  }

根据文档，style-loader首先运行然后将其输出管道输出到css-loader（因为按时间顺序排列）。但它不是如何运作的。实际上css-loader首先加载样式表然后将结果传递给style-loader，然后将它们附加到html页面。

如果我更改装载程序的顺序，则在构建时会出错：

 { loader: 'css-loader'},
 { loader: 'style-loader'}

错误：

ERROR in ./src/style.css
Module build failed: Unknown word (5:1)

  3 | // load the styles
  4 | var content = require("!!./style.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | // Prepare cssTransformation
  7 | var transform;
  8 | 

 @ ./src/index.js 1:14-36

我错过了什么？我没有正确的时间顺序吗？

Answer 1

以下是不同的docs

当多个加载器被链接时，重要的是要记住它们以相反的顺序执行 - 从右到左或从下到上依赖于数组格式。

现在有意义

装载机不按时间顺序编译

1 个答案: