webpack 之 Loader开发（一）

news2025/2/28 3:07:05

1. You may need an additional loader to handle the result of these loaders.（我们可能还需要一个额外的加载器来处理当前加载器的结果）

2. Loader可能经过一层层链路、又或者只有一层，最终的处理都是转化成 js，（Loader的本质是导出函数的JavaScript模块）Loader 只在编译时执行一次，也就是启动时，所以在开发过程中有改动，需要重启验证，又或者配合 webpack watch

3. 编写Loader原则

保持功能单一

我们项目中可能会配置很多，但要记住，要保持一个 Loader 的功能单一，避免做多种功能，只需完成一种功能转换即可

4. 实战

写一个 Markdown 转化Loader

vue.config.ts

module.exports = {
  publicPath: process.env.VUE_APP_PUBLIC_PATH,
  configureWebpack: {
    module: {
      rules: [
        {
          // md 后缀使用 mdLoader
          test: /\.md$/i,
          // 这里如果不写路径 默认从 node_modules 找
          use: './src/mdLoader',
        },
      ],
    },
  }
}

mdLoader.ts

首先看看Loader参数有哪些

const MdLoader = (content, sourceMap, meta) => {
  // 后缀是md文件的内容
  console.log(content, 'content')
  // 可被使用的 SourceMap 数据
  console.log(sourceMap, 'sourceMap')
  // meta 数据，可以是任何内容
  console.log(meta, 'meta')
}

项目中的markdown文件：

更新时间：2021 年 10 月 11 日

**北京空间变换科技有限公司及其关联方（简称“**我们**”）作为巨量千川平台（“**巨量千川**”）的运营者，深知个人信息对您的重要性，我们将按照法律法规的规定，保护您的个人信息及隐私安全。本隐私政策详细描述了我们如何收集、使用和处理与您有关的个人信息。特别提示：希望您在使用巨量千川及相关服务前仔细阅读并理解本隐私政策，做出适当的选择。使用巨量千川以您接受本政策为前提条件。如对本政策内容有任何疑问、意见或建议，您可通过 customerservice.qianchuan@service.feishu.cn 与我们联系。本隐私政策将帮助您了解：**

以上是打印的日志，是在Node的终端中打印，不是在浏览器中，Loader其实是Node语言

mdLoader.js

const MdLoader = (content, sourceMap, meta) => {
  const htmlCode = `<h2>Markdown示例文本</h2>
    <p>Markdown是一种轻量级的「标记语言」。</p>
    <blockquote>
      <p>引用文本：Markdown is a text formatting syntax inspired</p>
    </blockquote>
    <h3 id="普通内容">普通内容</h3>
    <ul>
      <li><strong>读一本好书，就是在和高尚的人谈话。</strong> ——歌德</li>
      <li><em>雇用制度对工人不利，但工人根本无力摆脱这个制度。</em> ——阮一峰</li>
    </ul>
    <h3 id="表格">表格</h3>
    <table align="center" width="400" cellspacing="1" border="1">
      <thead>
        <tr><th align="left">姓名</th><th align="center">年龄</th><th align="right">工作</th></tr>
      </thead>
      <tbody>
        <tr><td align="left">小可爱</td><td align="center">18</td><td align="right">吃可爱多</td></tr>
        <tr><td align="left">小小勇敢</td><td align="center">20</td><td align="right">爬棵勇敢树</td></tr>
      </tbody>
    </table>
    <h3 id="代码块">代码块</h3>
    <p>语言名称支持: <code>java</code>, <code>python</code>, <code>js</code>, <code>html</code>, <code>bash</code>, <code>json</code>, <code>yml</code>, <code>xml</code> ...</p>`
  return `module.exports = ${JSON.stringify(htmlCode)}`
  // return `export default ${JSON.stringify(htmlCode)}`
}

module.exports = MdLoader

假设 Md 处理最终如上所示，注意要导出的一定是 javaScript 函数

使用

index.vue

<template>
  <div v-html="MdText"></div>
</template>


const MdText = require('../docs/secret-i18n.md')
console.log(MdText, 'test')
export default {
  name: "Home",
  data () {
    return {
      MdText
    }
  }
};

这个时候浏览器控制台输出的MdText是被Loader处理过的了