Webpack 样式加载器与 css-加载器

Question

我有两个问题。

1) CSS Loader and Style Loader 是两个 webpack 加载器。我无法理解两者之间的区别。为什么我必须使用两个装载机，因为它们都在做同样的工作？

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

Answer 1

CSS 加载器采用 CSS 文件和 returns 带有 imports 和 url(...) 的 CSS 通过 webpack 的 [=14] 解析=] 功能：

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 loader

imports

url(...)

使用样式加载器将这些样式插入到页面中

Answer 2

回答第二个问题"What is this .useable.less and .useable.css mentioned in the above Readme.md files?"，默认情况下，当样式为require'd时，style-loader模块会自动将<script>标签注入DOM，并且该标记保留在 DOM 中，直到浏览器 window 关闭或重新加载。 style-loader 模块还提供了一个所谓的 "reference-counted 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”。

Answer 3

css-loader 将 css 文件作为字符串读入。您可以将其替换为 raw-loader 并在很多情况下获得相同的效果。因为它只读取文件内容，没有其他内容，所以它基本上没有用，除非你将它与另一个加载程序链接起来。

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

如果您在使用 style-loader 后查看 bundle.js 中的 javascript，您会在生成的代码中看到一条注释，上面写着

// style-loader: Adds some css to the DOM by adding a tag

例如，

<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 4

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

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

Answer 5

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

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

Webpack 样式加载器与 css-加载器

Webpack style-loader vs css-loader

webpack

webpack-style-loader