Loader 本质上就是⼀个 ESM 模块，它导出⼀个函数，在函数中对打包资源进⾏转换。

⾃定义 loader

声明⼀个读取 markdown（.md）⽂件内容的 loader marked（将 markdown 语法转成 html） loader-utils（接受 loader 的配置项） 先安装上述两个包：npm i -D marked loader-utils const marked = require(‘marked’) const { getOptions } = require(‘loader-utils’) // 导出函数 (建议使⽤普通函数) module.exports = function(source) { // 获取 loader 的配置项 const options = getOptions(this) console.log(‘my loader’, options) // return ‘my loader’ // return ‘console.log(“my loader”)’ const html = marked(source) // “

关于">关于

我是张三

“ // 直接返回，可能因为引号的问题，导致报错 // return module.exports = "${html}" // return module.exports = ${JSON.stringify(html)} // 直接返回 html，交给下⼀个 loader 进⾏处理 return html } 如果你声明的 loader 是处理管道中的最后⼀环，则返回结果要求必须是 JavaScript 代码。 ⾃定义 loader - 图1 使⽤⾃定义 loader module.exports = (env, argv) => { // 模块配置 module: { rules: [ { test: /.md$/i, // use: ‘./loader/markdown-loader’ use: [ ‘html-loader’, // ‘./loader/markdown-loader’ { loader: ‘./loader/markdown-loader’, options: { size: 20 } } ] }, ] } }