webpack系列学习六（loader实战案例）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

在前面一节中我们学了如何编写一个自己的loader，在这里就来实战一个案例：自己去写下面的loader，让webpack支持less的编译功能

• style-loader
• css-loader
• less-loader

loader 处理webpack不⽀持的格式⽂件，模块⼀个loader只处理⼀件事情loader有执⾏顺序

loader执行顺序：⾃下⽽上，⾃右到左

示例：

• 新建文件./src/style/index.less

body{
  div {
    display: flex;
    height: 100px;
    background: blue;
  }
}

• 新建文件./myLoaders/frllk-style-loader.js

 * @Autor: frllk
 * @Description: 
 * @Date: 2022-06-19 00:01:06
 * @LastEditors: frllk
 * @LastEditTime: 2022-06-19 00:20:38
 * @FilePath: \frllk-studybook\webpack\webpack02\myLoaders\frllk-style-loader.js
 */
/**
 * style-loader: 操作DOM，创建style
 * 拿到上一个loader返回的css，塞到style标签内部
 * 会把css-loader⽣成的内容，以style挂载到⻚⾯的heade部分
 */

module.exports = function (source) {
  return `
  
    const tag = document.createElement("style");

    tag.innerHTML = ${source};

    document.head.appendChild(tag)
  `
}

• 新建文件./myLoaders/frllk-css-loader.js

/*
 * @Autor: frllk
 * @Description: 
 * @Date: 2022-06-19 00:01:20
 * @LastEditors: frllk
 * @LastEditTime: 2022-06-19 00:17:37
 * @FilePath: \frllk-studybook\webpack\webpack02\myLoaders\frllk-css-loader.js
 */
/**
 * css-loader: 对css进行序列化
 */

module.exports = function (source) {
  return JSON.stringify(source)
}

• 新建文件./myLoaders/frllk-less-loader.js

 * @Autor: frllk
 * @Description: 
 * @Date: 2022-06-19 00:01:27
 * @LastEditors: frllk
 * @LastEditTime: 2022-06-19 00:14:36
 * @FilePath: \frllk-studybook\webpack\webpack02\myLoaders\frllk-less-loader.js
 */
/**
 * less-loader：把less语法转换成css
 * less ====> css
 */
const less = require('less')

module.exports = function (source) {
  // render渲染，对内容进行处理
  // error: 错误信息
  // 第二个参数：表示是将源码生成什么样子 将output的css格式拿出来
  less.render(source, (error, {css}) => {
    // 同步的调用，这里有error，返回回去
    this.callback(error, css)
  })
}

• 修改文件webpack.config.js

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [miniCssPlugin.loader, 'css-loader'] // 执行顺序：自后往前
      },
      {
        test: /\.less$/,
        use: [
          'frllk-style-loader',
          'frllk-css-loader',
          'frllk-less-loader'
        ]
      }
    ]
  },

• 生成的依赖图谱如下：

eval("\n  \n    const tag = document.createElement(\"style\");\n\n    tag.innerHTML = \"body div {\\n  display: flex;\\n  height: 100px;\\n  background: blue;\\n}\\n\";\n\n    document.head.appendChild(tag)\n  \n\n//# sourceURL=webpack:///./src/style/index.less?");

• 实现效果如下：