关于前端:一起来自定义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;
};

此时通过 ice-babel-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 的内容能够参考我其它的博文，继续更新中~