今天分享的內(nèi)容是如何開發(fā)一個(gè)簡(jiǎn)單的 Webpack Loader，希望通過(guò)這個(gè)過(guò)程能夠讓你 Get 到 Webpack Loader 的工作原理與機(jī)制。

[[349525]]

Loader 作為 Webpack 的核心機(jī)制，內(nèi)部的工作原理卻非常簡(jiǎn)單。接下來(lái)我們一起來(lái)開發(fā)一個(gè)自己的 Loader，通過(guò)這個(gè)開發(fā)過(guò)程來(lái)深入了解 Loader 的工作原理。

這里我的需求是開發(fā)一個(gè)可以加載 markdown 文件的加載器，以便可以在代碼中直接導(dǎo)入 md 文件。我們都應(yīng)該知道 markdown 一般是需要轉(zhuǎn)換為 html 之后再呈現(xiàn)到頁(yè)面上的，所以我希望導(dǎo)入 md 文件后，直接得到 markdown 轉(zhuǎn)換后的 html 字符串，如下圖所示：

由于這里需要直觀地演示，我就不再單獨(dú)創(chuàng)建一個(gè) npm 模塊，而是就直接在項(xiàng)目根目錄下創(chuàng)建一個(gè) markdown-loader.js 文件，完成后你可以把這個(gè)模塊發(fā)布到 npm 上作為一個(gè)獨(dú)立的模塊使用。

項(xiàng)目結(jié)構(gòu)與核心代碼如下所示：

└─ 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>' 

每個(gè) Webpack 的 Loader 都需要導(dǎo)出一個(gè)函數(shù)，這個(gè)函數(shù)就是我們這個(gè) Loader 對(duì)資源的處理過(guò)程，它的輸入就是加載到的資源文件內(nèi)容，輸出就是我們加工后的結(jié)果。我們通過(guò) source參數(shù)接收輸入，通過(guò)返回值輸出。這里我們先嘗試打印一下 source，然后在函數(shù)的內(nèi)部直接返回一個(gè)字符串'hello loader ~'，具體代碼如下所示：

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

完成以后，我們回到 Webpack 配置文件中添加一個(gè)加載器規(guī)則，這里匹配到的擴(kuò)展名是.md，使用的加載器就是我們剛剛編寫的這個(gè) markdown-loader.js 模塊，具體代碼如下所示：

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

TIPS：這里的 use 屬性不僅可以使用模塊名稱，還可以使用模塊文件路徑，這點(diǎn)與 Node 中的 require 函數(shù)是一樣的。

配置完成后，我們?cè)俅未蜷_命令行終端運(yùn)行打包命令，如下圖所示：

打包過(guò)程中命令行確實(shí)打印出來(lái)了我們所導(dǎo)入的 Markdown 文件內(nèi)容，這就意味著 Loader 函數(shù)的參數(shù)確實(shí)是文件的內(nèi)容。

但同時(shí)也報(bào)出了一個(gè)解析錯(cuò)誤，說(shuō)的是：You may need an additional loader to handle the result of these loaders.（我們可能還需要一個(gè)額外的加載器來(lái)處理當(dāng)前加載器的結(jié)果）。

那這究竟是為什么呢？其實(shí) Webpack 加載資源文件的過(guò)程類似于一個(gè)工作管道，你可以在這個(gè)過(guò)程中依次使用多個(gè) Loader，但是最終這個(gè)管道結(jié)束過(guò)后的結(jié)果必須是一段標(biāo)準(zhǔn)的 JS 代碼字符串。

所以我們這里才會(huì)出現(xiàn)上面提到的錯(cuò)誤提示，那解決的辦法也就很明顯了：

• 直接在這個(gè) Loader 的最后返回一段 JS 代碼字符串；
• 再找一個(gè)合適的加載器，在后面接著處理我們這里得到的結(jié)果。

先來(lái)嘗試第一種辦法?；氐?markdown-loader 中，我們將返回的字符串內(nèi)容修改為 console.log('hello loader~')，然后再次運(yùn)行打包，此時(shí) Webpack 就不再會(huì)報(bào)錯(cuò)了，代碼如下所示：

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

那此時(shí)打包的結(jié)果是怎樣的呢？我們打開輸出的 bundle.js，找到最后一個(gè)模塊（因?yàn)檫@個(gè) md 文件是后引入的），如下圖所示：

這個(gè)模塊里面非常簡(jiǎn)單，就是把我們剛剛返回的字符串直接拼接到了該模塊中。這也解釋了剛剛 Loader 管道最后必須返回 JS 代碼的原因，因?yàn)槿绻S便返回一個(gè)內(nèi)容，放到這里語(yǔ)法就不通過(guò)了。

# 實(shí)現(xiàn) Loader 的邏輯

了解了 Loader 大致的工作機(jī)制過(guò)后，我們?cè)倩氐?markdown-loader.js 中，接著完成我的需求。這里需要安裝一個(gè)能夠?qū)?Markdown 解析為 HTML 的模塊，叫作 marked。

安裝完成后，我們?cè)?markdown-loader.js 中導(dǎo)入這個(gè)模塊，然后使用這個(gè)模塊去解析我們的 source。這里解析完的結(jié)果就是一段 HTML 字符串，如果我們直接返回的話同樣會(huì)面臨 Webpack 無(wú)法解析模塊的問(wèn)題，正確的做法是把這段 HTML 字符串拼接為一段 JS 代碼。

此時(shí)我們希望返回的代碼是通過(guò) module.exports 導(dǎo)出這段 HTML 字符串，這樣外界導(dǎo)入模塊時(shí)就可以接收到這個(gè) HTML 字符串了。如果只是簡(jiǎn)單地拼接，那 HTML 中的換行和引號(hào)就都可能會(huì)造成語(yǔ)法錯(cuò)誤，所以我這里使用了一個(gè)小技巧，具體操作如下所示：

// ./markdown-loader.js 
const marked = require('marked') 
module.exports = source => { 
  // 1. 將 markdown 轉(zhuǎn)換為 html 字符串 
  const html = marked(source) 
  // html => '<h1>About</h1><p>this is a markdown file.</p>' 
  // 2. 將 html 字符串拼接為一段導(dǎo)出字符串的 JS 代碼 
  const code = `module.exports = ${JSON.stringify(html)}` 
  return code 
  // code => 'export default "<h1>About</h1><p>this is a markdown file.</p>"' 
} 

先通過(guò) JSON.stringify() 將字段字符串轉(zhuǎn)換為標(biāo)準(zhǔn)的 JSON 字符串，然后再參與拼接，這樣就不會(huì)有問(wèn)題了。

我們回到命令行再次運(yùn)行打包，打包后的結(jié)果就是我們所需要的了。

除了 module.exports這種方式，Webpack 還允許我們?cè)诜祷氐拇a中使用 ES Modules 的方式導(dǎo)出，例如，我們這里將module.exports修改為 export default，然后運(yùn)行打包，結(jié)果同樣是可以的，Webpack 內(nèi)部會(huì)自動(dòng)轉(zhuǎn)換 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 
} 

# 多個(gè) Loader 的配合

我們還可以嘗試一下剛剛說(shuō)的第二種思路，就是在我們這個(gè) markdown-loader 中直接返回 HTML 字符串，然后交給下一個(gè) Loader 處理。這就涉及多個(gè) Loader 相互配合工作的情況了。

我們回到代碼中，這里我們直接返回 marked 解析后的 HTML，代碼如下所示：

// ./markdown-loader.js 
const marked = require('marked') 
module.exports = source => { 
  // 1. 將 markdown 轉(zhuǎn)換為 html 字符串 
  const html = marked(source) 
  return html 
} 

然后我們?cè)侔惭b一個(gè)處理 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'] 
      } 
    ] 
  } 
} 

安裝完成過(guò)后回到配置文件，這里同樣把 use 屬性修改為一個(gè)數(shù)組，以便依次使用多個(gè) Loader。不過(guò)同樣需要注意，這里的執(zhí)行順序是從后往前，也就是說(shuō)我們應(yīng)該把先執(zhí)行的 markdown-loader 放在后面，html-loader 放在前面。

完成以后我們回到命令行終端再次打包，這里的打包結(jié)果仍然是可以的。

至此，我們就完成了這個(gè) markdown-loader 模塊，其實(shí)整個(gè)過(guò)程重點(diǎn)在于 Loader 的工作原理和實(shí)現(xiàn)方式。