Webpack 样式加载器与 CSS 加载器答案

【问题标题】：Webpack style-loader vs css-loaderWebpack 样式加载器与 CSS 加载器
【发布时间】：2016-03-06 12:32:00
【问题描述】：

我有两个问题。

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

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

【问题讨论】：

详细解释见This is how angular-cli/webpack delivers your CSS styles to the client

标签： webpack webpack-style-loader

【解决方案1】：

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

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 加载器将 file.less 转换为纯 CSS
使用 CSS 加载器解析 CSS 中的所有 imports 和 url(...)s
使用样式加载器将这些样式插入页面

【讨论】：

你能告诉我，你在页面中插入样式是什么意思吗？因为我正在为 CSS 使用 ExtractTextPlugin 并且根据你写的内容，我不应该使用样式加载器。另外，我觉得使用样式加载器会使我的样式与 JS 捆绑在一起，直到我使用提取插件。注意：我正在使用 webpack。在删除该样式加载器之后，对我来说一切都没有改变，因为我刚刚在上面说过我已经将我的 CSS 保存在由提取插件创建的单独文件中..
@user3241111 我认为他的意思是：“通过注入<style> 标记将CSS 添加到DOM”（这是从github.com/webpack/style-loader 的官方文档中复制的）
所以想法是 webpack 剥离所有已处理的 CSS 并将其放在文档的头部，从而避免对标签和 url 样式定义的 HTTP 请求？我认为这就是重点。魅力和迷人之类的东西也可以做到这一点。我很确定这种方式加载速度更快。但我可能不正确。
并返回 CSS - 它返回 JS，参见 This is how angular-cli/webpack delivers your CSS styles to the client
这个答案根本没有解释如何配置 Webpack。为什么它是公认的答案？ @Brian Ogden 的正确答案如下。

【解决方案2】：

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

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

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

// style-loader：通过添加标签将一些css添加到DOM中

例如，

<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>消失了。

【讨论】：

那么我什么时候应该使用css-loader而不是raw-loader？
css-loader 像 import/require() 一样解释 @import 和 url() 并将解析它们。 raw-loader 只加载指定的文件。

【解决方案3】：

回答第二个问题“上面的Readme.md文件中提到的.useable.less和.useable.css是什么？”，默认当样式为require'd时，style-loader模块会自动注入一个<script> 标记到 DOM 中，并且该标记保留在 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”。

【讨论】：

这个答案与 Webpack 配置无关。
@AndrewKoster 我不明白你的意思。这是对原始发布者关于样式加载器模块的内部工作和文件命名约定的两部分问题的第二部分的答案。
当然，但正如你所说，这个问题有两个部分。这个答案（和接受的答案）完全忽略了问题的第一部分，这是更重要和普遍适用的部分。解决这些加载程序是什么以及如何配置它们的问题的唯一答案是 Brian Ogden 的回答，没有人投票支持（出于某种原因）。
我没有使用任何带有疯狂感叹号的奇怪的 require 语法，但我仍然需要知道如何在 Webpack 中配置这些加载器。我的用例似乎比你们使用疯狂的 require 语法所做的任何事情都更常见。
@AndrewKoster Brian 的回答没有解决我能检测到的任何问题。

【解决方案4】：

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

Javascript 中有不同的不兼容模块导入机制
webpack 允许、重写和扩展所有众所周知的模块导入机制
通常只能导入 Javascript
使用加载器，webpack 还允许导入其他文件
- 如果你开始使用该功能，那么没有 webpack 就无法再未经修改地使用 Javascript
加载器决定
- 如果输出目录中出现其他文件（通常不会）
- “返回”什么
加载器可以链接
最后一个加载器的输出将包含在包中
最后一个loader需要返回Javascript，否则捆绑的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 作为输入

【讨论】：

【解决方案5】：

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

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

【讨论】：

这是要回答哪个问题？
这是问题中1) 项的直接答案。
@AndrewKoster Item 1) 是一个问题“为什么我必须使用两个装载机，而它们都做同样的工作？”，这里没有回答。注意问题词“为什么”。