浅析css-loader和style-loader的作用、css-loader和style-loader是如何配合使用的、less-loader和css-loader和style-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实现（经简化）
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
    }
  );
};

// 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输出
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源码（经简化）
// 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}`);
};

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

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