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

Question

我是 webpack 的新手，对 webpack 如何与加载器协作仍然有点困惑。让我们有以下打字稿文件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 读取index.js并需要解析css文件，所以Webpack将任务传递给css-loader，因此css-loader将css文件读取为一个长长的字符串，然后将任务传递给style-loader，这样就创建了可以嵌入索引中标签的js代码.html 文件。

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

我的上述理解是否正确？如果是，以下是我的问题：

Q1-afterstyle-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代码传给webpackQ2好像是先用style-loader，然后css-loader介入，这似乎是错误的。但它是您需要阅读文档的其中一件事。处理它的最后一件事在数组的顶部提到。就我个人而言，我不认为反过来会更直观。