Webpack的样式加载器与CSS的加载器
我有两个问题。
1） CSS装载机和样式装载机是两个webpack装载机。 我无法把握两者的区别。 为什么当他们都做同样的工作时，我必须使用两个装载机？
2）上面的Readme.md文件中提到的.useable.less和.useable.css是什么？
CSS加载器需要一个CSS文件，并通过webpack的requirefunctionparsingimports和url(...)来返回CSS：
var css = require("css!./file.css"); // => returns css code from file.css, resolves imports and url(...)
它实际上不会对返回的CSS 做任何事情。
样式加载器使用CSS，并将其实际插入到页面中，以使样式在页面上处于活动状态。
它们执行不同的操作，但将它们链接在一起通常很有用，如Unixpipe道。 例如，如果您使用Less CSS预处理器 ，则可以使用
require("style!css!less!./file.less")
至
- 使用Less加载器将
file.less转换为纯CSS - 使用CSS加载器parsingCSS中的所有
imports和url(...) - 用样式加载器将这些样式插入到页面中
css-loader以一个string读入一个css文件。 你可以用raw-loader代替它，并在很多情况下获得相同的效果。 由于它只是读取文件内容而没有其他的东西，所以基本上没有用，除非你用另一个装载器来链接它。
style-loader这些样式，并在包含这些样式的页面的<head>元素中创build一个<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>
这个例子来自本教程 。 如果通过更改行从pipe道中删除style-loader
require("!style-loader!css-loader!./style.css");
至
require("css-loader!./style.css");
你会看到<style>消失。
要回答第二个问题：“上面的Readme.md文件中提到的.useable.less和.useable.css是什么？”，默认情况下，当需要样式时，样式加载器模块会自动注入一个<script>标记到DOM中，并且该标记保留在DOM中，直到浏览器窗口closures或重新加载。 样式加载器模块还提供了一个所谓的“引用计数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”。
