一起来自定义loader吧

2022-07-17 20:00:14 阅读：180 来源： 互联网

标签：const 定义来自 babel module js content loader

loader 在 webpack 编译中起到非常重要的作用，用于对模块的源代码进行转换，比如 css-loader 将 css 代码处理成字符串，style-loader 创建 style 标签将 css 代码添加到 html 页面中。

自定义 loader

新建 node 项目，在 src 文件夹下的 index.js 中简单编写一些代码

const user = {
  name: 'alice',
  age: 20,
};

创建 loaders 文件夹，在文件夹下增加用于处理 loader 的 js 文件，通过 module.exports 函数可以拿到需处理的文件内容，并将处理好的结果返回

module.exports = function (content) {
  console.log('ice-loader>>', content);
  return content + '"@author icecream"';
};

在配置文件 webpack.config.js 中引入自定义的 loader 。定义 loader 方式有两种

通过相对路径引入（这里使用的方式）
通过 resolveLoader 属性配置，默认会去 node_modules 中查询依赖

// 其他配置省略
module: {
    rules: [
      {
        test: /\.js/i,
        use: ['./loaders/ice-loader'],
      },
    ],
  },

通过 webpack 编译文件，在控制台上输出了获取到的文件内容，编译后文件就是通过自定义 loader 返回的内容。

同步异步 loader

通过 loader 处理的数据需要返回 javscript 字符串，有两种方式

return 语句返回内容
this.callback 函数返回内容

当遇到异步返回的情况时，直接使用以上两种方式是会报错的

需要通过 this.async 函数将处理过程变成异步，this.callback 第一个参数接收 error，如果没有错误则传递 null，其他参数与loader中 module.exports 获取的参数相同

babel-loader

babel-loader 处理 js 代码借助的是 babel 这个工具，我们也可以简易实现一个，取名为ice-babel-loader，使用 babel 的时候需要通过 plugin 或者 presets 定义处理规则

{
  test: /\.js/i,
  use: [
    {
      loader: './loaders/ice-babel-loader',
      options: {
        presets: ['@babel/preset-env'],
      },
    },
  ],
},

babel 工具核心库是 @babel/core，定义处理规则要用到预设 @babel/preset-env，依次安装

const babel = require('@babel/core');

module.exports = function (content) {

  const options = this.getOptions(); // 获取loader中定义的options
  const callback = this.async();
  
  babel.transform(content, options, (err, result) => {
    if (err) callback(error);
    callback(null, result.code);
  });
};

这样我们定义的 ice-babel-loader 就将 es6 的语法转成了 es5

md-loader

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。

那 md 文件是否可以通过 loader 转换成 html 文档呢？答案是肯定的，已经有一些好用的库给我们提供了这个功能。

marked 用于处理 markdown 格式的文件，highlight.js 用于给 markdown 文件中的代码设置样式

const { marked } = require('marked');
const hljs = require('highlight.js');

module.exports = function (content) {
  // 给markdown中的代码增加class属性
  marked.setOptions({
    highlight: function (code, lang) {
      return hljs.highlight(lang, code).value;
    },
  });
  const htmlContent = marked(content);
  return htmlContent;
};

此时通过 md-loader 返回的是普通字符串，不能被 javascript 代码所识别，还需要通过 html-loader 处理。

{
    test: /\.md/i,
    use: ['html-loader', './loaders/md-loader'],
},

通过 loader 处理后的 md 文件导出的是 javascript 字符串，所以可以直接添加到 body 中查看效果，另外代码的样式显示需要引入 highlight.js 中的 css 文件

// index.js
import code from './doc.md';
import 'highlight.js/styles/default.css';
document.body.innerHTML = code;

这样 markdown 文件就可以在项目中被解析到 html 页面中了

总结

自定义 loader 通过 module.exports 获取获取资源内容，经过一系列处理并返回处理后的结果。
自己编写的 loader 在本地可以直建立文件夹处理资源，开发完成后发布到 npm 仓库可以直接通过下载包的方式引用 loader。

以上就是关于自定义loader 的介绍，更多有关 webpack 的内容可以参考我其它的博文，持续更新中~

标签：const,定义,来自,babel,module,js,content,loader
来源： https://www.cnblogs.com/vigourice/p/16488205.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

一起来自定义loader吧

自定义 loader

同步异步 loader

babel-loader

md-loader

总结