webpack的CSS加载器的使用 - 行业资讯 - 肥雀云

装载机用于转换应用程序的资源文件,他们是运行在nodejs下的函数,使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用装载机来告诉webpack去加载一个coffeeScript或者巴别塔文件。

装载机的解析类似模块,一个加载器模块会导出一个方法并且可被nodejs写为可兼容的JavaScript,通常情况下通过npm来管理加载程序,但你也可以把装载机放在自己的应用里。

<强> css-loader处理css中路径引用等问题
　　

用于在js中加载css,解释@ import和url ()

<强>
选项　　

别名:解析别名
　　

importLoaders (@ import):在css-loader前应用的装载机的数目,默认为0
　　

最小化:真或假是否开启css代码压缩,比如压缩空格不换行
　　

模块:是否开启css-module

　　　　　　模块。出口={ 　　… 　　模块:{ 　　规则:[{ 　　测试:/\ . css/美元, 　　用途:[style-loader, { 　　装载机:“css-loader”, 　　选择:{//当css文件中又引用了其他的css的时候,需要设置importLoaders 　　importLoaders: 1 　　｝　　}) 　　}) 　　｝　　}；　　之前　　　　

加载的css作为风格标签内容插入到html中,以& lt; style> & lt;/style>形式在html页面中插入css代码

<强>
选项　　

insertAt:插入位置
　　

insertInto:插入到指定的dom
　　

单:真或假,多个样式是否只生成一个& lt; style> & lt;/style>标签

postcss-loader:为了浏览器的兼容性,有时候我们必须加上-webkitm, - ms, -moz等前缀。目的就是让页面可以在每个浏览器上正常运行.postcss是一个CSS的处理平台可以帮CSS实现更多的功能。
　　

用法:
　　

安装postcss: npm安装postcss-loader autoprefixer
　　

配置文件

webpack.config。js:
　　

　　　　　　模块:{ 　　规则:[{ 　　测试://美元\ . css 　　装载机:“style-loader css-loader ! postcss-loader” 　　}) 　　｝　　之前　　　　

postcss.config。js
　　

　　　　　　模块。出口={ 　　插件:[ 　　需要(autoprefixer)//在postcss-loader中引入autoprefixer插件　　] 　　｝　　之前　　　　

或者　　　　　　const autoprefixer=要求(“autoprefixer”); 　　模块:{ 　　规则:[{ 　　测试:/\ . css/美元, 　　用途:[‘style-loader’,‘css-loader’, { 　　装载机:“postcss-loader”, 　　选择:{ 　　插件(){ 　　返回(autoprefixer); 　　｝　　｝　　}) 　　}) 　　｝　　之前　　　　

添加对webpack少的支持。当遇到少文件时,先交给less-loader处理,然后交给css-loader,最后交由style-loader处理,然后执行webpack打包

　　　　　　模块:{ 　　规则:[{ 　　测试:/\ .less/美元, 　　装载机:“style-loader css-loader ! less-loader” 　　}) 　　｝　　之前　　　　

要启源用CSS的地图,你需要将sourceMap选项传递给less-loader和css-loader

CSS SourceMap信息文件,里面存储着位置信息。随着代码增多,我们会对代码进行压缩,代码压缩之后进行调错误定位会非常困难,于是引入SourceMap记录压缩前后的位置信息,当产生错误时直接定位到未压缩前的位置,方便调试。简单来说就是记录压缩的翻译文件,通过这个文件可以找到你的对应源码

　　　　　　模块。出口={ 　　… 　　模块:{ 　　规则:[{ 　　测试:/\ .less/美元, 　　用途:[‘style-loader’,‘css-loader’, { 　　装载机:“less-loader”, 　　选择:{ 　　sourceMap:真　　｝　　}) 　　}) 　　｝　　}；　　之前　　　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。