如何快速開發(fā)一個(gè)Webpack Loader

本篇內(nèi)容主要講解“如何快速開發(fā)一個(gè)Webpack Loader”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何快速開發(fā)一個(gè)Webpack Loader”吧!

Loader 作為 Webpack 的核心機(jī)制，內(nèi)部的工作原理卻非常簡單。接下來我們一起來開發(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

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

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

每個(gè) Webpack 的 Loader 都需要導(dǎo)出一個(gè)函數(shù)，這個(gè)函數(shù)就是我們這個(gè) Loader 對資源的處理過程，它的輸入就是加載到的資源文件內(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$/,        // 直接使用相對路徑use: './markdown-loader'      }    ]  }}

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

配置完成后，我們再次打開命令行終端運(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è)模塊里面非常簡單，就是把我們剛剛返回的字符串直接拼接到了該模塊中。這也解釋了剛剛 Loader 管道最后必須返回 JS 代碼的原因，因?yàn)槿绻S便返回一個(gè)內(nèi)容，放到這里語法就不通過了。

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

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

安裝完成后，我們在 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 字符串了。如果只是簡單地拼接，那 HTML 中的換行和引號就都可能會(huì)造成語法錯(cuò)誤，所以我這里使用了一個(gè)小技巧，具體操作如下所示：

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

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

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

除了 module.exports這種方式，Webpack 還允許我們在返回的代碼中使用 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 }

然后我們再安裝一個(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)方式。

到此，相信大家對“如何快速開發(fā)一個(gè)Webpack Loader”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！