webpack-Loader手写

最近在学习webpack相关知识，今天记录一下自己学的第一个Loader—将Markdown文本显示在网页上。
md文件

## 这是我自己写的一个loader
**你能看到我，全靠loader的公功劳。**

` ` `
console.log('hello webpack')
` ` `

index.js：添加至页面

import blog from  './blog.md'

var node = document.createElement('div')
node.innerHTML = blog
document.body.append(node)

Loader：mdToHtml.js文件

const marked = require('marked')
function mdToHtml(md){
    var result = marked(md)
    return result
}
module.exports = mdToHtml
// Loader本质上是一个函数，所以需要暴露函数。

webpack.config.js

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

const { resolve } = path

module.exports = {
    entry: resolve(__dirname, 'src/index.js'),
    // './src/index.js',
    // 等于{main:'./src/index.js'}

    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    // './dist/main.js',

    mode: 'development',
    module: {
        rules: [
            {
                test:/\.md$/,
                use: [
                    'html-loader',
                    './mdToHtml.js'
                    //resolve(__dirname, 'mdToHtml.js')
                ]
                //需要注意：要想展示在html上，必须要使用html-loader
                //可以直接写Loader的路径文件，但是其实是推荐绝对路径。
            }
        ]
    },
    plugins: [
        // 向页面插入打包的js/css代码
        new HtmlWebpackPlugin({
            template: 'public/index.html'
        }),
        // 打包前，先清除之前的打包文件夹
        new CleanWebpackPlugin(
            ['dist']
        )
}