javascript - style-loader 和 css-loader 的工作流程是什么

Question

我是 webpack 的新手，对于 webpack 如何与 loader 配合还是有点困惑。让我们有下面的 typescript 文件 index.ts:

//index.ts

import "bootstrap/dist/css/bootstrap.css";

...
// typescript code

下面是 webpack 配置文件:

module.exports = {
    mode: "development",
    entry: "./src/index.ts",
    output: { filename: "bundle.js" },
    resolve: { extensions: [".ts", ".js", ".css"] },
    module: {
        rules: [
            { test: /\.ts/, use: "ts-loader", exclude: /node_modules/ },
            { test: /\.css$/, use: ["style-loader", "css-loader"] }
        ]
    }
};

以下是我个人对webpack如何与loader配合的想法，如有错误请指正:

第1步-Webpack遇到index.ts，因此将这个文件传递给ts-loader，然后ts-loader读取该文件并传递给ts编译器，ts编译器生成js代码文件index.js并传回给ts-loader，然后ts-loader传递index.js 返回 webpack。

第2步-Webpack读取index.js并需要解析css文件，因此Webpack将任务传递给css-loader，因此css-loader 将 css 文件读取为很长的字符串，然后将任务传递给 style-loader，后者创建可以嵌入到 index.html 文件中的标记中的 js 代码。

第3步- bundle.js 准备就绪，客户端发送http请求以获取index.html，以及bundle.js获取并创建一个 <style> 标签以包含所有 css 样式。

我的上述理解正确吗？如果是的话，以下是我的问题:

Q1-style-loader生成js代码后，是否将这些js代码传回css-loader，然后css-loader将收到的js代码传递给webpack？或者 style-loader 将生成的 js 代码直接传递给 webpack？

Q2- 在 webpack 配置文件中:

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

似乎首先使用style-loader，然后使用css-loader(我已经尝试过这种方法，它有效，但不确定为什么它有效)

不是说 css-loader 应该首先开始工作，然后 style-loader 如下:

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

Answer 1

Is my above understanding correct?

是的

Q1-after style-loader generates js code, does it pass those js code back to css-loader, then css-loader passes received js code to webpack? or style-loader pass generated js code to webpack directly?

答案:style-loader将生成的js代码直接传递给webpack

Q2 it seems that the style-loader is used first, then css-loader steps in,

这似乎是错误的。但这是您需要阅读文档的事情之一。处理它的最后一件事在数组的顶部提到。就我个人而言，我认为反过来不会更直观。