浅析css-loader和style-loader的作用、css-loader和style-loader是如何配合使用的、less-loader和css-loader和style-loader的实现原理

　　大家都清楚在使用webpack构建前端项目时都会使用到sass-loader、less-loader、postcss-loader、css-loader、style-loader，但这些loader在其中起到什么作用呢？本篇主要阐述css-loader与style-loader的作用和实现，加深对loader的理解。

　　style-loader和css-loader作用是不同的。

1、css-loader: 加载.css文件

2、style-loader：使用<style>将css-loader内部样式注入到我们的HTML页面

一、css-loader的作用

1、先讲css-loader的作用：css-loader是帮助webpack打包处理css文件的工具

2、css-loader 使用注意项：

（1）使用css-loader必须要配合使用style-loader

（2）css-loader的作用是帮我们分析出各个css文件之间的关系，把各个css文件合并成一段css

（3）style-loader的作用是将css-loader生成的css代码挂载到页面的header部分

（4）多个loader配合使用时，处理顺序是：从下到上，从右到左 的顺序；

3、由于 webpack 只能处理js相关的文件，所以像图片和css资源是处理不了的，css-loader的作用是将css文件转换成webpack能够处理的资源，而style-loader就是帮我们直接将css-loader解析后的内容挂载到html页面当中

二、css-loader和style-loader是如何配合使用的？

　　webpack是用JS写的，运行在node环境，所以默认webpack打包的时候只会处理JS之间的依赖关系！

　　因为像 .css 这样的文件不是一个 JavaScript 模块，你需要配置 webpack 使用 css-loader 或者 style-loader 去合理地处理它们。

　　css-loader会遍历css文件，找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style

1、如果在JS中导入了css，那么就需要使用 css-loader 来识别这个模块，通过特定的语法规则进行转换内容最后导出

　　css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样，默认生成一个数组存放存放处理后的样式字符串，并将其导出。

// base.css
.bg { background: #000; } const style = require('./base.css') console.log(style, 'css')

　　css-loader处理之后导出的是

　　但是这并不是我们想要的，因为是个数组，页面是无法直接使用，这时我们需要用到额外一个style-loader来处理。

2、style-loader 是通过一个JS脚本创建一个style标签，里面包含一些样式。style-loader是不能单独使用的，因为它并不负责解析 css 之前的依赖关系，每个loader的功能都是单一的，各自拆分独立。

　　style-loader的作用是把 CSS 插入到 DOM 中，就是处理css-loader导出的模块数组，然后将样式通过style标签或者其他形式插入到DOM中。

　　配置项injectType可配置把 styles 插入到 DOM 中的方式。

三、css-loader和style-loader的使用方式

1、内联方式（不常用）如：import "css-loader!../css/style.css"

　　在导入的样式前加上使用的loader，并且使用 !分隔，此方法不常用

2、cli 方式：已弃用

3、配置方式：在webpack.config.js文件中写明配置信息，module.rules中可以配置多个loader

const path = require('path'); module.exports = { entry: "./src/main.js",//入口文件
  output: {//出口文件
    path: path.resolve(__dirname, "build"), filename:"bundle.js" }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] } ] } }

　　注意：写法是有顺序的

四、less-loader

　　Less是CSS预处理语言，扩展了CSS语言，增加了变量、Mixin、函数等特性，Less-loader的作用就是将less代码转译为浏览器可以识别的CSS代码。

　　所以less-loader的原理很简单，就是调用less库提供的方法，转译less语法后输出，如下：

// less-loader实现（经简化）
const less = require('less'); module.exports = function(content) { const callback = this.async(); // 转译比较耗时，采用异步方式
  const options = this.getOptions(); // 获取配置文件中less-loader的options
 less.render( content, createOptions(options), // less转译的配置
    (err, output) => { callback(err, output.css); // 将生成的css代码传递给下一个loader
 } ); };

五、css-loader

　　css-loader的作用主要是解析css文件中的@import和url语句，处理css-modules，并将结果作为一个js模块返回。

　　假如我们有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对a.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模块的导出内容。

// css-loader源码（经简化） // https://github.com/webpack-contrib/css-loader/blob/master/src/index.js
import postcss from 'postcss'; module.exports = async function (content, map, meta) { const options = this.getOptions(); // 获取配置

  const plugins = []; // 转译源码所需的postcss插件
  shouldUseModulesPlugins(options, this) && plugins.push(modulesPlugins); // 处理css-modules
  shouldUseImportPlugin(options, this) && plugins.push(importPlugin); // 处理@import语句
  shouldUseURLPlugin(options, this) && plugins.push(urlPlugin); // 处理url()语句
  shouldUseIcssPlugin(options, this) && plugins.push(icssPlugin); // 处理icss相关逻辑

  if (meta && meta.ast) { // 复用前面loader生成的CSS AST（如postcss-loader）
    content = meta.ast.root; } const result = await postcss(plugins).process(content); // 使用postcss转译源码

  const importCode = getImportCode(); // 需要导入的依赖语句
  const moduleCode = getModuleCode(result); // 模块导出内容
  const exportCode = getExportCode(); // 其他需要导出的信息，如css-modules的类名映射等

  const callback = this.async(); // 异步返回
  callback(null, `${importCode}${moduleCode}${exportCode}`); };

六、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); `; };

　　但css-loader返回的不是css样式代码的文本，而是一个js模块的代码，将这些js代码直接放进style标里显然是不行的。

　　我们来看看style-loader的实现：

// style-loader
import loaderUtils from 'loader-utils'; module.exports = function (content) { // do nothing
}; module.exports.pitch = function (remainingRequest) { /* * 用require语句获取css-loader返回的js模块的导出 * 用'!!'前缀跳过配置中的loader，避免重复执行 * 用remainingRequest参数获取loader链的剩余部分，在本例中是css-loader、less-loader * 用loaderUtils的stringifyRequest方法将request语句中的绝对路径转为相对路径 */
  const requestPath = loaderUtils.stringifyRequest(this, '!!' + remainingRequest); // 本例中requestPath为: // '!!../node_modules/css-loader/index.js!../node_modules/less-loader/dist/cjs.js!src/styles/index.less'

  return ` const content = require(${requestPath}) const style = document.createElement('style'); style.innerHTML = content; document.head.appendChild(style); `; };

　　style-loader的几个设计思路：

1、css-loader返回的样式只能通过其js模块的运行时得到，故使用require语句取得

2、normal方法实际上什么都没做，在pitch方法里中断loader链的执行，再以inline方式调用了后方的loader来加载当前的less文件

3、如果将pitch中的实现放到normal方法里，就会造成loader链执行两遍

4、如果requestPath中没有'!!'前缀，就会造成loader链被无限循环调用

　　style-loader的实现逻辑比较绕，也是一个比较经典的pitch应用，理解了它的原理，就可以是说对loader的调用链、执行顺序和模块化输出等有了一个比较全面的认识，推荐细细体会。