手写webpack markdown-loader

loader

作为webpack的核心，负责资源文件从输入到输出的转换

实现

///readme.md
## MarkDown-Loader

///index.js
import md from './readme.md';

document.write(md);

///markdown-loader.js
///loader的返回必须是js代码
const { marked } = require('marked');

module.exports = (source) => {
  const html = marked(source);
  return `module.exports = ${JSON.stringify(html)}`;
};

///webpack.config.js
const path = require('path');

module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.md$/,
        use: './markdown-loader',
      },
    ],
  },
};