编写webpackplugin组件的前期准备工作

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情

编写webpack的plugin组件，首先还是需要先配置一个webpack的配置文件 这webpack的配置文件 比较简单 ，据体配置里的每个属性代表什么大家看可以看文档 或者是我之前写的 # 代码实现虚拟dom和diff的前期工作 这里有详细的介绍

const path =require('path')
// 引用我们自己的插件
const mdtohtml = require('./plugins/md-to-html-plugin')

module.exports = {
   mode: 'development',
   entry: path.resolve(__dirname,'src/app.js'),
   output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'app.js'
   },
   plugins: [
      new mdtohtml({
        template: path.resolve(__dirname,'test.md'),// 要引用的模版
        filename: 'test.html'// 打包之后的文件名称
      })
   ]
}

咱们呢来说一下具体要是实现什么插件，要实现一个.md文件里的markdown,转化为html的功能，功能不多只是想让大家了解一个。

代码思路

1 需要有一个.md文件作为模板 2 md的template html 3 markdown转化为html标签 4 html标签替换掉html模版内部的注释 5webpack打包

简单解释一下第四点，就是我们想要把已经转化的html放到html模版中，最方便的方法就是用注释的方式，这个也是用法最多的方式，

大家可以先看一下目录结构

大家可以看到在我们的插件文件里是有一个html的模版的，我们把test.md的内容转化完就直接放到template.html模版上，大家可以看下html内容

转化的完html换的就是content的这个注释

大家应该注意到了我们在使用mdtohtml这个方法时候是用的实例化，所我们在插件里写的是应该是构造函数，或者直接是es6的class 插件index.js的代码

class Mdtohtml{
  constructor (options) {
      // c参数默认值 { template,  filename="index.html" }
      // w我们还需要判断配置，template是比传上
      // 当然你也可以写默认值
      if (options.template) {
         throw new Error('没有传入模版')
      }
      this.template = options.template
      this.filename = this.filename?this.filename: "md.html"
  } 
}

module.exports = Mdtohtml