Webpack loader 的工作原理

Loader 作为 Webpack 的核心机制，内部的工作原理却非常简单。
每个 Webpack 的 Loader 都需要导出一个函数，这个函数就是我们这个 Loader 对资源的处理过程，它的输入就是加载到的资源文件内容，输出就是我们加工后的结果。我们通过 source 参数接收输入，通过返回值输出。
对于返回的输出，有两种思路：

• 直接在这个 Loader 的最后返回一段 JS 代码字符串；
• 再找一个合适的加载器，在后面接着处理我们这里得到的结果

Webpack 加载资源文件的过程类似于一个工作管道，你可以在这个过程中依次使用多个 Loader，但是最终这个管道结束过后的结果必须是一段标准的 JS 代码字符串。

// ./markdown-loader.js
const marked = require(‘marked‘)

module.exports = source => {
  const html = marked(source)
  // const code = `module.exports = ${JSON.stringify(html)}`
  const code = `export default ${JSON.stringify(html)}`
  return code 
}

Webpack loader 的工作原理

原文：https://www.cnblogs.com/tsmaster/p/13460652.html