Webpack样式加载器vs css加载器

我有两个问题。

1) CSS装载机和风格加载程序是两个webpack加载器。我无法理解两者之间的区别。为什么我必须使用两个装载机，当他们都做同样的工作?

2)这是什么?less和.useable.css在上面的自述文中提到。md文件?

85874 次浏览
小开
最佳答案

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

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

它实际上并没有做任何返回的CSS。

样式加载器接收CSS并实际将其插入到页面中，以便样式在页面上是活动的。

它们执行不同的操作，但将它们链接在一起通常很有用，就像Unix管道一样。例如，如果你正在使用少CSS预处理器，你可以使用

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

来

  1. 用Less加载器将file.less转换为普通的CSS
  2. 使用CSS加载器解析CSS中的所有imports和__abc1
  3. 使用样式加载器将这些样式插入到页面中
小开

要回答第二个问题“这是什么。有用的。”less和.useable.css在上面的自述文中提到。，默认情况下，当样式为require'd时，样式加载器模块会自动向DOM中注入<script>标记，并且该标记一直保留在DOM中，直到浏览器窗口关闭或重新加载。样式加载器模块还提供了所谓的“引用计数API”，允许开发人员添加样式，并在以后不再需要时删除它们。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加载的样式表有一个扩展名“.usable.css”，而不是上面简单的“.css”。

小开

css-loader在css文件中作为字符串读取。你可以用raw-loader替换它，在很多情况下得到同样的效果。因为它只是读取文件内容，没有其他内容，所以它基本上是无用的，除非你将它与另一个加载器链接。

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

如果你在使用style-loader后查看bundle.js内部的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>

这个例子来自本教程。如果通过更改行从管道中删除style-loader

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

来

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

你会看到<style>消失了。

小开

Webpack文档建议将style-loader和css-loader结合使用:

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

小开

让我来回答你的问题。style-loader和css-loader之间的区别是什么?或者:他们是做什么的?

  • Javascript中有不同的不兼容的模块导入机制
  • Webpack允许、重写和扩展所有众所周知的模块导入机制
  • 通常只能导入Javascript
  • 与加载器，webpack也允许导入其他文件
    • 如果你开始使用这个功能，Javascript就不能在没有webpack的情况下使用
  • 加载器决定
    • 如果输出目录中出现其他文件(通常不会)
    • “返回”什么?
  • 装载机可以用链条连接
  • 最后一个加载器的输出将包含在bundle中
  • 最后一个加载器需要返回Javascript，否则绑定的Javascript将会出错
  • 以css-loader结尾的导入将接收Javascript中的数组
    • 我找不到合适的文件说明你将收到什么
    • 数组似乎为每个处理的CSS文件包含一个元素(例如，使用CSS @import规则)，文件名称和文件内容(修改)作为字符串
    • 输出目录中不会有额外的文件
    • 如果你单独使用css-loader，那么你必须自己对字符串做一些事情，否则它们只是徒劳地增加你的bundle大小
  • style-loader将把css-loader中的Javascript包装成更多的Javascript
    • 它不能也不读取CSS文件
    • 包装使用来自css-loader的CSS字符串创建<style>元素，并将它们注入DOM
    • style-loader不能单独使用(你会得到一个错误)，因为它不读取文件，并期望__abc1类Javascript作为输入

提交答案