Webpack的样式加载器与CSS的加载器

我有两个问题。

1) CSS装载机和样式装载机是两个webpack装载机。 我无法把握两者的区别。 为什么当他们都做同样的工作时,我必须使用两个装载机?

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

CSS加载器需要一个CSS文件,并通过webpack的requirefunctionparsingimportsurl(...)来返回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") 

  1. 使用Less加载器将file.less转换为纯CSS
  2. 使用CSS加载器parsingCSS中的所有importsurl(...)
  3. 用样式加载器将这些样式插入到页面中

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”。