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转化成html
const _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;