Markdown Loader在webpack.config.js里面设置好具体的内容示例中用到了HtmlWebpac

在webpack.config.js里面设置好具体的内容

示例中用到了HtmlWebpackPlugin；
- HtmlWebpackPlugin简化了HTML文件的创建；
- 你可以让该插件为你生成一个 HTML 文件；
- 这个插件是专门生成HTML文件的。
安装

npm install --save-dev html-webpack-plugin

基本用法：该插件将为你生成HTML5文件，在body中使用script标签引入你所有webpack生成的bundle。；该插件将为你生成一个 HTML5 文件，在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。只需添加该插件到你的 webpack 配置中，如下所示：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin()],
};

这将会生成一个包含以下内容的 dist/index.html 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

之前的loader都是直接安装的，别人做好的，现在我们要自己制作一个loader；
如果引用现成的loader，只需要在use中引用；

module.exports = {
  module: {
    rules: [
      { test: /.css$/, use: 'css-loader' },
      { test: /.ts$/, use: 'ts-loader' },
    ],
  },
};

写了一个名字为article.md的markdown文件；
在一个html模板里require这个md
需要一个loader去处理这个md文件，把他变成html文件，再放进来。

module:{
test:/\.md$/,
use:[
{
loader:'html-loader'
},
{
loader:'markdown-loader',
option:{}
}],
}

接下来就是markdown-loader的做法：

const { getOptions } = require('loader-utils') 
const validateOptions = require('schema-utils') 
const MarkdownIt = require('markdown-it')