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

Question

我是 webpack 的新手，对 webpack 如何与加载器协作仍然有点困惑。让我们有以下打字稿文件index.ts：//index.tsimport "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代码传给webpack

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

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