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 的工作原理

上一篇:httpd服务器Failed to start httpd.service: Unit httpd.service is masked.解决办法


下一篇:5.前端CSS—属性