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

Question

我是 webpack 的新手，對於 webpack 如何與裝載機配合仍然有些困惑。 讓我們在下面有 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 如何與裝載機一起工作的想法，如果我錯了，請糾正我：

Step 1-Webpack 遇到index.ts ，於是把這個文件傳給ts-loader ， ts-loader讀取文件傳給 ts 編譯器，ts 編譯器生成 js 代碼文件index.js傳回ts-loader ，然后ts-loader將index.js傳回 webpack。

Step 2- Webpack reads index.js and needs to resolve the css file, so Webpack passes the task to css-loader , so css-loader reads the css file as a long long string, then passes the task to style-loader , which創建可以嵌入到 index.html 文件中的標簽中的 js 代碼。

Step 3- bundle.js is ready, and client sends a http request to get index.html , and the bundle.js is fetched and create a <style> tags to include all css styles.

我的上述理解正確嗎？ 如果是，以下是我的問題：

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

我的上述理解正確嗎？

是的

Q1-style-loader生成js代碼后，是否將這些js代碼傳回css-loader，然后css-loader將收到的js代碼傳給webpack？ 還是 style-loader 直接將生成的 js 代碼傳遞給 webpack？

答：style-loader 將生成的js代碼直接傳給webpack

Q2 好像是先用style-loader，然后css-loader介入，

這似乎是錯誤的。 但它是您需要閱讀文檔的那些事情之一。 數組頂部提到了處理它的最后一件事。 就我個人而言，我不認為反過來會更直觀。