1. babel-loader

安装依赖

引入babel/core，调用它的transform函数

调用时，可传入plugin

最后通过callback把转后的代码返回

在同步代码中，直接通过 return 返回。在异步代码中，通过 this.async 获取 callback，然后使用callback返回转换后的结果。

2. markdown-loader

依赖

marked库

从该库导入 marked 函数。调用 marked 函数，将markdown语法转化为html语法。

但是html代码无法直接导出，我们得将它转化为Nodejs模块化的形式导出。

导出之后，我们就能在 main.js 中正常拿到该模块了，然后将html添加到body里即可：

以上步骤完成了初步的 markdown 转 html。但还有一些问题，比如代码如何高亮？可以从控制台看到，代码都是一坨代码，没有添加特殊的class。换而言之，不能设置颜色，不能高亮。

3. 自定义plugin

• compiler 生命周期代表了整个 Webpack 打包过程的开始和结束，它负责管理全局的配置和插件，并在适当的时机触发插件的执行。
• compilation 生命周期代表了每次具体的编译过程，用于处理当前的编译任务，包括模块解析、资源生成、Loader 的执行和插件的执行。