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

Question

我是 webpack 的新手，对于 webpack 如何与 loader 配合仍然有点困惑。让我们有下面的打字稿文件 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的思考，如有错误请指正：

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读取[=61] =]文件作为一个很长的字符串，然后将任务传递给style-loader，它创建可以嵌入index.html文件中标签的js代码。

第 3 步 - bundle.js 准备就绪，客户端发送一个 http 请求以获取 index.html，然后获取 bundle.js 并创建一个

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

what's the workflow of style-loader and css-loader

javascript

typescript

webpack

webpack-style-loader