html-loader的作用

在开发中，如果需要在.HTML文件中使用到模板字符串，字符串中使用到了变量，那么HTML-Plguin是无法处理的，所以会报错，如果想解决这个问题，我们需要借助一个loader----html-loader

css-loader的作用

在开发vue项目的过程中，因为代码太多太混乱，导致有的时候看不清那个ele元素的样式需要一个个去找，这个是框架出来之前一直都存在的通病，现在通常都会使用less或者sass配合组件化开发，让每个子元素的样式都可以嵌套在一个父元素中，提高代码观赏性。
Less是css预处理预处理语言，扩展了CSS语言，增加了变量、Mixin、函数等特性，Less-loader的作用就是将less代码转译为浏览器可以识别的CSS代码。

// demo.less
@base: #f938ab;.box-shadow(@style, @c) when (iscolor(@c)) {-webkit-box-shadow: @style @c;box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {color: saturate(@base, 5%);border-color: lighten(@base, 30%);div { .box-shadow(0 0 5px, 30%) }
}

上面的less会被less-loader解析成为

// demo.css
.box {color: #fe33ac;border-color: #fdcdea;
}
.box div {-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

css-loader

css-loader的作用主要是解析css文件中的@import和url语句，处理css-modules，并将结果作为一个js模块返回。在项目中我有用到的就是通常我们需要给软件定义一个主题色，如果是移动端页面的话，还需要根据尺寸定义字体大小，或者说可以定义三种字体大小，让项目中所有地方都可以用的到，就可以定义css样式中的变量，再在需要该主题色或者字体的直接引入即可。

假如我们有a.css、b.css、c.css：

// a.css
@import './b.css'; // 导入b.css.a {font-size: 16px;
}// b.css
@import './c.css'; // 导入c.css.b {color: red;
}// c.css
.c {font-weight: bolder;
}

再看一下css-loader对上面css的解析

// css-loader输出exports = module.exports = require("../../../node_modules/css-loader/lib/css-base.js")(false);// imports
// 文件需要的依赖js模块，这里为空// module
exports.push([ // 模块导出内容module.id, ".src-components-Home-index__c--3riXS {\n  font-weight: bolder;\n}\n.src-components-Home-index__b--I-yI3 {\n  color: red;\n}\n.src-components-Home-index__a--3EFPE {\n  font-size: 16px;\n}\n", ""
]); // exports
exports.locals = { // css-modules的类名映射"c": "src-components-Home-index__c--3riXS","b": "src-components-Home-index__b--I-yI3","a": "src-components-Home-index__a--3EFPE"
};

可以理解为css-loader将a.css、b.css和c.css的样式内容以字符串的形式拼接在一起，并将其作为js模块的导出内容。

style-loader

经过css-loader的转译，我们已经得到了完整的css样式代码，style-loader的作用就是将结果以style标签的方式插入DOM树中。

直觉上似乎我们只需要像下面这样返回一段js代码，将css-loader返回的结果插入DOM就行：

module.exports = function (content) {return `const style = document.createElement('style');style.innerHTML = '${content}';document.head.appendChild(style);`;
};

此文对照原文加工学习
原文链接：https://juejin.cn/post/6944668149849522213

html-loader、css-loader、style-loader简单描述相关推荐

加载html动画logo,仅CSS实现的加载动画 – Loader.css
仅CSS实现的加载动画 – Loader.css 4月 13, 2015 评论 (6) Sponsor 当网页的页面大小较大,用户加载可能需要较长的时间,在这些情况下,我们一般会用到(加载)loadi ...
vue-cli Webpack之Loader原理及自定义Loader
文章目录 1. Loader 分类与执行顺序 1.1 Loader 分类 1.2 Loader 执行顺序 1.3 使用Loader方式 1.3.1 内联 Loader 2. 开发 Loader 步骤 ...
Webpack之Loader原理及自定义Loader
文章目录 1. Loader 分类与执行顺序 1.1 Loader 分类 1.2 Loader 执行顺序 1.3 使用Loader方式 1.3.1 内联 Loader 2. 开发 Loader 步骤 ...
webpack loader解析及自定义loader
自定义实现webpack loader加载模块,解析指定的类型文件 loader loader是一个导出为函数的node模块,可通过this访问上下文. 特点: loader单一职责,只负责解决单一的 ...
CSS背景图像的简单响应
本文设有很多,最理想的解决方案,响应图像只是其中之一.我们建议您查看不同的方法,然后再选择一个特定的响应图像解决方案,包括这两个:如何避免重复下载响应图像中选择响应图像解决方案. 大家都在谈论的的sr ...
JavaScript修改css中style,classname,cssText实例
一.局部改变样式分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N& ...
CSS实验案例02简单专业介绍网页
文章目录 CSS实验案例02简单专业介绍网页 2.1CSS 2.2HTML CSS实验案例02简单专业介绍网页 2.1CSS body {/* 主体*/font-size: 24px;text-ali ...
简单描述下微信小程序的相关文件类型？
简单描述下微信小程序的相关文件类型? 微信小程序项目结构主要有四个文件类型,如下: .WXML 是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构.内部主要是微信自己定义的一套组件 ...
css画钟表_利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
css 修改文字基准线_HTML4/HTML5 用CSS或style属性修改 hr 实线虚线点线双实线样式 ... ......
HTML4/HTML5 用CSS或style属性修改实线虚线点线双实线样式 HTML 是 Hyper Text Markup Language 的英文缩写,中文称为超文本标记语言.HTML 是 ...

html-loader、css-loader、style-loader简单描述

html-loader的作用

css-loader的作用

css-loader

style-loader

html-loader、css-loader、style-loader简单描述相关推荐

最新文章

热门文章