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

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

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

由于这里需要直观地演示，我就不再单独创建一个 npm 模块，而是就直接在项目根目录下创建一个 -.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

# About
this is a markdown file.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

# 实现 的逻辑

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

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

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

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

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

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

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

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

# 多个 的配合

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

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

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

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

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

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

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

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

限时特惠:本站持续每日更新海量各大内部创业课程，一年会员仅需要98元，全站资源免费下载
点击查看详情

站长微信:Jiucxh