Question

我有两个问题。

1）CSS Loader和Style Loader是两个webpack加载器。我无法理解两者之间的差异。当他们做同样的工作时，为什么我必须使用两个装载机？

2）上面的Readme.md文件中提到的.useable.less和.useable.css是什么？

Answer 1

CSS加载器获取一个CSS文件，并通过webpack的imports功能返回带有url(...)和require的CSS：

var css = require("css!./file.css");
// => returns css code from file.css, resolves imports and url(...)

使用返回的CSS实际上

样式加载器使用CSS并实际将其插入到页面中，以便样式在页面上处于活动状态。

他们执行不同的操作，但将它们链接在一起通常很有用，比如Unix管道。例如，如果您使用的是the Less CSS preprocessor，则可以使用

require("style!css!less!./file.less")

到

使用Less loader

file.less

使用CSS加载程序解析CSS中的所有imports和url(...)
使用样式加载器

Answer 2

css-loader以字符串形式读取css文件。您可以将其替换为raw-loader，并在很多情况下获得相同的效果。因为它只是读取文件内容而没有别的，除非你用另一个加载器链接它，否则它基本上没用。

style-loader获取这些样式，并在包含这些样式的页面<style>元素中创建<head>标记。

如果您在使用bundle.js后查看style-loader内的javascript，则会在生成的代码中看到评论

// style-loader：通过添加标记
向DOM添加一些css

例如，

<html>
    <head>
        <!-- this tag was created by style-loader -->
        <style type="text/css">
            body {
                background: yellow;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

该示例来自this tutorial。如果您通过更改行

从管道中删除style-loader

require("!style-loader!css-loader!./style.css");

到

require("css-loader!./style.css");

您会看到<style>消失。

Answer 3

回答第二个问题＆＃34;上面的Readme.md文件中提到的.useable.less和.useable.css是什么？＆＃34;，默认情况下样式为require'd时， style-loader模块自动将<script>标记注入DOM，并且该标记保留在DOM中，直到浏览器窗口关闭或重新加载。样式加载器模块还提供了一个所谓的＆＃34;引用计数API＆＃34;这允许开发人员添加样式，并在以后不再需要时删除它们。 API的工作方式如下：

const style = require('style/loader!css!./style.css')
// The "reference counter" for this style starts at 0
// The style has not yet been injected into the DOM
style.use()  // increments counter to 1, injects a <style> tag
style.use()  // increments counter to 2
style.unuse()  // decrements counter to 1
style.unuse()  // decrements counter to 0, removes the <style> tag

按照惯例，使用此API加载的样式表有一个扩展名＆＃34; .usable.css＆＃34;而不是简单的＆＃34; .css＆＃34;如上所述。

Answer 4

让我从你的问题中回答 1)。 style-loader 和 css-loader 有什么区别？或者：他们做什么？

Javascript 中存在不同的不兼容模块导入机制
webpack 允许、重写和扩展所有众所周知的模块导入机制
通常只能导入 Javascript
使用加载器，webpack 还允许导入其他文件
- 如果您开始使用该功能，那么在没有 webpack 的情况下，该 Javascript 将无法再未经修改地使用
加载器决定
- 如果输出目录中出现其他文件（通常不会）
- “返回”什么
加载器可以链接
最后一个加载器的输出将包含在包中
最后一个加载器需要返回Javascript，否则绑定的Javascript就会出错
以 css-loader 结尾的导入将在 Javascript 中接收一个数组
- 我找不到您将收到的适当文件
- 对于处理的每个 CSS 文件，该数组似乎包含一个元素（例如，使用 CSS @import 规则），将文件名和文件内容（已修改）作为字符串
- 输出目录中不会有多余的文件
- 如果你单独使用 css-loader，那么你必须自己对字符串做一些事情，否则它们只会增加你的包大小
style-loader 会将来自 css-loader 的 Javascript 包装在更多的 Javascript 中
- 它不能也不会读取 CSS 文件
- 包装使用来自 <style> 的 CSS 字符串创建 css-loader 元素并将它们注入到 DOM 中
- style-loader 不能单独使用（你得到一个错误），因为它不读取文件并期望 css-loader-like Javascript 作为输入

Answer 5

Webpack文档建议将style-loader与css-loader结合使用：

https://webpack.js.org/loaders/style-loader/

Webpack样式加载器vs css-loader

5 个答案: