写一个自己的webpack loader

概述

在学习webpack的时候，接触到loader的就会觉得很神奇，他可以不同文件解析，从而我们可以引入自定义的文件类型到js代码中，像vue-loader可以处理.vue文件一样，根据官方文档说明，这里记录一个自己工作中实现的一个简单loader。

目录结构

需要自己按照官方文档搭建一个简易的webpack项目，这里不在赘述，参考官方文档指南部分。

• 我们在根目录下建一个loader文件夹，用来存放我们自己的loader

实现reverse-loader

主要用来转换.md文件，将里面的英文内容进行翻转。

// loader/reverse-loader.js
module.exports = function reverseLoader(content) {
  // 内容转化成小写后输出
  //export default加这个原因是我们模块化import导入的时候可以使用这里的转化后的字符串
 return `export default ${JSON.stringify(content).split("").reverse().join("")}`;
};

// src/index.js
import test from "./test.md";
document.body.innerHTML = test;

//webpack.config.js
 module: {
    rules: [
      {
        test: /\.html/,
        type: "asset/inline",
        generator: {
          filename: "static/[hash][ext][query]",
        },
      },
      {
        test: /\.md$/,
        use: ["./loader/reverse-loader.js"],//这里使用自己写的loader文件夹相对地址
      },
    ],
  },

最终效果

实现clean-log-loader

webpack官方提供了清除浏览器控制台打印信息的配置，我们在掌握loader实现过程后，可以自己写一个，也不复杂

    // loader/reverse-loader.js
 module.exports = function cleanLogLoader(content) { 
    // 正则匹配console.log替换为空，最后文件在打包到dist之前会将文件中的console.log全部删除
    return content.replace(/console\.log\(.*\);?/g, "");
};

总结：

了解loader的实现过程，可以更加深入理解webpack，也能更加方便我们自定义需要处理的文件类型。