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

創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)提供從項(xiàng)目策劃、軟件開發(fā)，軟件安全維護(hù)、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評(píng)估等整套的建站服務(wù)，主營業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)，重慶App定制開發(fā)以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。創(chuàng)新互聯(lián)公司深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

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

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

 
 
 
 

  
  
  
  

  
  
  
  

  
  
  
  
# About
  
  
  
  

  
  
  
  
this is a markdown file.
 
 
 
 

 
 
 
 

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

每個(gè) Webpack 的 Loader 都需要導(dǎo)出一個(gè)函數(shù)，這個(gè)函數(shù)就是我們這個(gè) Loader 對(duì)資源的處理過程，它的輸入就是加載到的資源文件內(nèi)容，輸出就是我們加工后的結(jié)果。我們通過 source參數(shù)接收輸入，通過返回值輸出。這里我們先嘗試打印一下 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)行打包命令，如下圖所示：

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

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

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

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

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

先來嘗試第一種辦法?；氐?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)容，放到這里語法就不通過了。

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

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

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

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

 
 
 
 

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

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

我們回到命令行再次運(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 的配合

我們還可以嘗試一下剛剛說的第二種思路，就是在我們這個(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']
  
  
  
  
      }
  
  
  
  
    ]
  
  
  
  
  }
  
  
  
  
}
 
 
 
 

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

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

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

分享名稱：如何用5分鐘開發(fā)一個(gè)WebpackLoader？
網(wǎng)站鏈接：http://www.dlmjj.cn/article/djppsgg.html