如何用5分钟开发一个 Webpack Loader？

 今天分享的内容是如何开发一个简单的 Webpack Loader，希望通过这个过程能够让你 Get 到 Webpack Loader 的工作原理与机制。

[[349525]]

Loader 作为 Webpack 的核心机制，内部的工作原理却非常简单。接下来我们一起来开发一个自己的 Loader，通过这个开发过程来深入了解 Loader 的工作原理。

这里我的需求是开发一个可以加载 markdown 文件的加载器，以便可以在代码中直接导入 md 文件。我们都应该知道 markdown 一般是需要转换为 html 之后再呈现到页面上的，所以我希望导入 md 文件后，直接得到 markdown 转换后的 html 字符串，如下图所示：

由于这里需要直观地演示，我就不再单独创建一个 npm 模块，而是就直接在项目根目录下创建一个 markdown-loader.js 文件，完成后你可以把这个模块发布到 npm 上作为一个独立的模块使用。

项目结构与核心代码如下所示：

└─ 03-webpack-loader ······················· sample root dir 
   ├── src ································· source dir 
   │   ├── about.md ························ markdown module 
   │   └── main.js ························· entry module 
   ├── package.json ························ package file 
   ├── markdown-loader.js ·················· markdown loader 
   └── webpack.config.js ··················· webpack config file 

<!-- ./src/about.md --> 
 
# About 
 
this is a markdown file. 

// ./src/main.js 
import about from './about.md' 
console.log(about) 
// 希望 about => '<h1>About</h1><p>this is a markdown file.</p>' 

每个 Webpack 的 Loader 都需要导出一个函数，这个函数就是我们这个 Loader 对资源的处理过程，它的输入就是加载到的资源文件内容，输出就是我们加工后的结果。我们通过 source参数接收输入，通过返回值输出。这里我们先尝试打印一下 source，然后在函数的内部直接返回一个字符串'hello loader ~'，具体代码如下所示：

// ./markdown-loader.jsmodule.exports = source => {// 加载到的模块内容 => '# About\n\nthis is a markdown file.'console.log(source)// 返回值就是最终被打包的内容return 'hello loader ~'} 

完成以后，我们回到 Webpack 配置文件中添加一个加载器规则，这里匹配到的扩展名是.md，使用的加载器就是我们刚刚编写的这个 markdown-loader.js 模块，具体代码如下所示：

// ./webpack.config.jsmodule.exports = {entry: './src/main.js',output: {filename: 'bundle.js'  },module: {rules: [      {test: /\.md$/,        // 直接使用相对路径use: './markdown-loader'      }    ]  }} 

TIPS：这里的 use 属性不仅可以使用模块名称，还可以使用模块文件路径，这点与 Node 中的 require 函数是一样的。

配置完成后，我们再次打开命令行终端运行打包命令，如下图所示：

打包过程中命令行确实打印出来了我们所导入的 Markdown 文件内容，这就意味着 Loader 函数的参数确实是文件的内容。

但同时也报出了一个解析错误，说的是：You may need an additional loader to handle the result of these loaders.（我们可能还需要一个额外的加载器来处理当前加载器的结果）。

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

所以我们这里才会出现上面提到的错误提示，那解决的办法也就很明显了：

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

先来尝试第一种办法。回到 markdown-loader 中，我们将返回的字符串内容修改为 console.log('hello loader~')，然后再次运行打包，此时 Webpack 就不再会报错了，代码如下所示：

// ./markdown-loader.js 
module.exports = source => { 
  // 加载到的模块内容 => '# About\n\nthis is a markdown file.' 
  console.log(source) 
  // 返回值就是最终被打包的内容 
  // return 'hello loader ~' 
  return 'console.log("hello loader ~")' 
} 

那此时打包的结果是怎样的呢？我们打开输出的 bundle.js，找到最后一个模块（因为这个 md 文件是后引入的），如下图所示：

这个模块里面非常简单，就是把我们刚刚返回的字符串直接拼接到了该模块中。这也解释了刚刚 Loader 管道最后必须返回 JS 代码的原因，因为如果随便返回一个内容，放到这里语法就不通过了。

# 实现 Loader 的逻辑

了解了 Loader 大致的工作机制过后，我们再回到 markdown-loader.js 中，接着完成我的需求。这里需要安装一个能够将 Markdown 解析为 HTML 的模块，叫作 marked。

安装完成后，我们在 markdown-loader.js 中导入这个模块，然后使用这个模块去解析我们的 source。这里解析完的结果就是一段 HTML 字符串，如果我们直接返回的话同样会面临 Webpack 无法解析模块的问题，正确的做法是把这段 HTML 字符串拼接为一段 JS 代码。

此时我们希望返回的代码是通过 module.exports 导出这段 HTML 字符串，这样外界导入模块时就可以接收到这个 HTML 字符串了。如果只是简单地拼接，那 HTML 中的换行和引号就都可能会造成语法错误，所以我这里使用了一个小技巧，具体操作如下所示：

// ./markdown-loader.js 
const marked = require('marked') 
module.exports = source => { 
  // 1. 将 markdown 转换为 html 字符串 
  const html = marked(source) 
  // html => '<h1>About</h1><p>this is a markdown file.</p>' 
  // 2. 将 html 字符串拼接为一段导出字符串的 JS 代码 
  const code = `module.exports = ${JSON.stringify(html)}` 
  return code 
  // code => 'export default "<h1>About</h1><p>this is a markdown file.</p>"' 
} 

先通过 JSON.stringify() 将字段字符串转换为标准的 JSON 字符串，然后再参与拼接，这样就不会有问题了。

我们回到命令行再次运行打包，打包后的结果就是我们所需要的了。

除了 module.exports这种方式，Webpack 还允许我们在返回的代码中使用 ES Modules 的方式导出，例如，我们这里将module.exports修改为 export default，然后运行打包，结果同样是可以的，Webpack 内部会自动转换 ES Modules 代码。

// ./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 
} 

# 多个 Loader 的配合

我们还可以尝试一下刚刚说的第二种思路，就是在我们这个 markdown-loader 中直接返回 HTML 字符串，然后交给下一个 Loader 处理。这就涉及多个 Loader 相互配合工作的情况了。

我们回到代码中，这里我们直接返回 marked 解析后的 HTML，代码如下所示：

// ./markdown-loader.js 
const marked = require('marked') 
module.exports = source => { 
  // 1. 将 markdown 转换为 html 字符串 
  const html = marked(source) 
  return html 
} 

然后我们再安装一个处理 HTML 的 Loader，叫作 html-loader，代码如下所示：

// ./webpack.config.js 
module.exports = { 
  entry: './src/main.js', 
  output: { 
    filename: 'bundle.js' 
  }, 
  module: { 
    rules: [ 
      { 
        test: /\.md$/, 
        use: ['html-loader', './markdown-loader'] 
      } 
    ] 
  } 
} 

安装完成过后回到配置文件，这里同样把 use 属性修改为一个数组，以便依次使用多个 Loader。不过同样需要注意，这里的执行顺序是从后往前，也就是说我们应该把先执行的 markdown-loader 放在后面，html-loader 放在前面。

完成以后我们回到命令行终端再次打包，这里的打包结果仍然是可以的。

至此，我们就完成了这个 markdown-loader 模块，其实整个过程重点在于 Loader 的工作原理和实现方式。