手写webpack插件，小白入门 —

Compiler 模块是 webpack 的主要引擎，它通过 CLI 传递的所有选项，或者 Node API，创建出一个 compilation 实例。它扩展(extend)自 Tapable 类，用来注册和调用插件。

const { readFileSync } = require('fs');
const { resolve } = require('path');
const {compileHTML} = require('./compileHTML')
class MdToHtmlPlugin {constructor({ template, filename }) {if (!template) {throw new Error('expected a md file');}(this.template = template),(this.filename = filename ? filename : 'md.html');}apply(compiler) {compiler.hooks.emit.tap('md-to-html-template', (compilation) => {//所有需要输出的资源会存放在 compilation.assets 中，//compilation.assets 是一个键值对，键为需要输出的文件名称，值为文件对应的内容const _assets = compilation.assets;// 得到md文件const _mdContent = readFileSync(this.template, 'utf8');// 得到html 模板const _templateHTML = readFileSync(resolve(__dirname, 'template.html'),'utf8',);//md文件要一行一行处理，所以根据 \n 把md文件分成数组const _mdContentArray = _mdContent.split('\n');// 将template.html的占位符保存下来const INNER_MARK = '<!-- inner -->';// 这个函数待定 ，还没写完：// 主要功能就是把md转化成htmlconst _htmlString = compileHTML(_mdContentArray)// 用编译好的htmlString 替换 模板里面的占位符,(即 把md文档转化成html标签包裹的HTML文档，然后插入进模板中)  //然后把模板输出const _finalHTML = _templateHTML.replace(INNER_MARK, _htmlString);_assets[this.filename] = {// 加入一个要输出的资源  即 以this.filename 为文件名 输出编译好的md-to-html文件source() {return _finalHTML;},// 指定大小size() {return _finalHTML.length;},};});}
}module.exports = MdToHtmlPlugin;

手写webpack插件，小白入门 —— md文档转成html相关推荐

linux md文件编辑,用Vim写md文档的简单姿势
对于重度Vim使用者来说,编辑md文档用Vim是顺理成章的事,在此记录下来. 近期开始带学生接触Openstack开发.在8G内存的笔记本上跑个Devstack开发环境,至少要分掉4G,否则虚拟机卡成 ...
babel原理_手写webpack核心原理，再也不怕面试官问我webpack原理
手写webpack核心原理一.核心打包原理 1.1 打包的主要流程如下 1.2 具体细节二.基本准备工作三.获取模块内容四.分析模块五.收集依赖六.ES6转成ES5(AST) 七.递归获取 ...
手写webpack系列一：了解认识loader-utils
Created By JishuBao on 2019-03-29 12:38:22 Recently revised in 2019-04-01 12:38:22 欢迎大家来到技术宝的掘金世界, ...
【自己动手写神经网络】小白入门连载（二）--机器人时代必须得有人工神经（不是神经病）...
2019独角兽企业重金招聘Python工程师标准>>> [自己动手写神经网络]小白入门连载(一) 在上一章中,我们已经介绍了神经网络的基本概念.思想,并提及了有关人工神经元模型的部分 ...
web 前端签名插件_手写签名插件—jSignature
jSignature 是一个通过捕捉笔画的矢量轮廓输出多种格式数据的jQuery插件,通过该插件我们可以实现绘画板.手写签名等功能. 使用该插件需要引入 jQuery 和jSignature.js,首 ...
页面手写签名插件 jSignature.min.js 使用实例
页面手写签名插件 jSignature.min.js 使用实例 jSignature.min.js 插件下载页面使用demo <!DOCTYPE html> <html xmlns ...
解决别人在收到我们发送的*.md文档时，图片无法显示的问题。
原因: .word格式其实是一个压缩包,把图片也放在里面了,所以我们在收到word文件后,可以正常查看其中的图片. 但是.md格式不同,一般的,我们需要同时传输.md文档和图片,或者他 ...
自动将*.md文档中的图片上传到Gitee（Typora+PicGo+Gitee）
1. 存在问题很多刚接触markdown文档格式的友友们,在使用文档中的图片时还存在一些问题:直接将截图下来的图片或是本机图片粘贴在文档中,图片的地址还是本地文件的地址(如D:\xxx),这种情况下 ...
README.md文档编写
本公司轻量化程序一般分为控制台程序和插件程序两种,可分别编写md文件,命名为:README.md和README_ADDIN.md.其中参考内容模型为: 1:README.md # XXX#### 调用 ...

手写webpack插件，小白入门 —— md文档转成html

手写webpack插件，小白入门 —— md文档转成html相关推荐

最新文章

热门文章