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

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