时间戳

首页 > 解决方案 > style-loader 和 css-loader 的工作流程是什么

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

问题描述

我是 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，再传回webpack。ts-loaderindex.js

Step 2- Webpack读取index.js并需要解析css文件，所以Webpack将任务传递给css-loader，所以css-loader将css文件作为一个长长的字符串读取，然后将任务传递给style-loader，这样就创建了可以嵌入索引中标签的js代码.html 文件。

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

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

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"] }
...

标签： javascripttypescriptwebpackwebpack-style-loader

解决方案

我的上述理解正确吗？

是的

Q1-style-loader生成js代码后，是否将这些js代码传回css-loader，然后css-loader将接收到的js代码传给webpack？还是 style-loader 直接将生成的 js 代码传递给 webpack？

答：style-loader 直接将生成的js代码传给webpack

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

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

推荐阅读