Webpack 自定义Loader

Loader就是负责资源文件从输入到输出的一个转换，实际上是一种管道的概念，对于同一个资源，可以依次使用多个Loader。通过多个Loader，完成一个功能。

在自定义loader模块的时候，就是将输入的内容转换成一个标准的js语句，并输出到bundle.js中。可以直接将转换结果写成标准的js语句，也可以执行另外一个loader，通过另外的loader将结果再次转换成一个标准的js语句。如下代码，markdown-loader将源文件转换成了html语句，然后通过html-loader再次转换，最终将结果写入到bundle.js中。

示例代码：

// 自定义Loader模块
const marked = require("marked");
module.exports = (source) => {
    const html = marked(source);
    return `${html}`;
    // return `module.exports = ${JSON.stringify(html)}`;
    // return `export default ${JSON.stringify(html)}`;
};

// webpack.config.js 模块
const path = require("path")
module.exports = {
    mode: "none",
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundle.js",
        publicPath: "dist/",
    },
    module: {
        rules: [{
            test: /\.md$/,
            use: ["html-loader", "./markdown-loader"],
        }, ],
    },
};

// bundle.js 返回结果
var code = "<!-- @format -->\n\n<h3 id=\"自定义-loader\">自定义 Loader</h3>\n<p>自定义 markdown-loader。</p>\n";
// Exports
module.exports = code;