如何用 webpack 开发一个loader

设想：创建一个markdown-loader，用来加载  .md 文件

目录结构如下：

---

具体步骤如下：

 1: 新建一个 about.md 文件， main.js 引入 about.md

    about.md

# 关于我

我是sevenJi ，一个纠结大王～

    main.js

import about from './about.md'

console.log(about)

2: 创建一个markdown-loader.js： 我们自定义的 loader  用来加载 .md 文件

    安装 marked 【是一个Markdown 解析器和编译器，可以在线编译Markdown 代码为 HTML 并直接显示】

    npm install --save-dev marked

const marked = require('marked')  // 引入marked


// source接收输入，return ：输出
module.exports = source => {
        console.log(source)
        return 'hello ~' // 执行 npm run build: 报错, 这里需要输出一个js代码
        return console.log('hello ~') // 执行 npm run build: 输出了 hello～
        
        const html = marked(source) // marked()来解析source,转换后结果是一段html字符串
        // 方法一：直接返回js代码
        // return `module.exports = "${html}"` // 如果直接拼接，换行符或者引号，会造成语法错误
        return `export default ${JSON.stringify(html)}` // 标准js代码                
        // 方法二： 直接返回html字符串，交给下一个html-loader来处理
        return html
}
备注： loader最后必须返回javaScript代码【因为：webpack打包过程中，是直接将loader加载之后的结果拼接在我们打包文件模块中】

3: 配置 webpack.config.js， 用我们自定义的 markdown-loader 解析 .md 文件

const path = require('path')
module.exports = {
    /*
        webpack工作模式通过mode属性设置，这个属性有3个值，production  development none
        1. 生产模式下，Webpack 会自动优化打包结果；
        2. 开发模式下，Webpack 会自动优化打包速度，添加一些调试过程中的辅助；
        3. None 模式下，Webpack 就是运行最原始的打包，不做任何额外处理；
    */
    mode: 'development'      // 默认工作模式：production模式
    entry: './src/main.js',  // 自定义入口文件，默认是src/index.js； dist/main.js:默认输出路径
 // entry: './src/main.css', // 资源模块加载 css-loader 和 style-loader,css引入到各个js模块中
    output: {  // 资源输出配置项
        filename: 'bundle.js', // 文件名
        path: path.join(__dirname, 'dist'), // 打包后输出文件存放地址
        publicPath: 'dist/' // 静态资源生成路径，后面浏览器上加载静态资源路径，如图片加载
    },
    module: {
        rules: [
            {
                test: /.md$/,
                use: [
                 'html-loader', // 执行顺序，从后向前执行,./markdown-loader解析后交给下一个html-loader处理
                './markdown-loader' // 用绝对路径加载自己开发的loader：markdown-loader
                ] 
            }
        ]
    }
}

4: 执行：npm run build

结果如下，导出了.md 文件为 js 代码，拼接到打包文件里