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

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;