加载器不是按时间顺序编译的

Question

来自docs：

A chain of loaders are compiled chronologically. The first loader in a chain of loaders returns a value to the next.

我们以下面的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

When multiple loaders are chained, it is important to remember that they are executed in reverse order -- either right to left or bottom to top depending on array format.

现在明白了

加载器不是按时间顺序编译的

Loaders are not compiled chronologically

webpack

webpack-3

webpack-loader