样式加载器和 CSS 加载器的工作流程是什么

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 如何与加载器一起工作的想法，如果我错了，请纠正我：

步骤1-Webpack遇到index.ts，所以它把这个文件传递给ts-loader，ts-loader读取文件并传递给ts编译器，ts编译器生成js代码文件index.js并传回ts-loader，然后ts-loaderindex.js传回webpack。

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

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