建站
咨詢
售后
建站咨詢
新聞中心
今天分享的內(nèi)容是如何開發(fā)一個簡單的 Webpack Loader，希望通過這個過程能夠讓你 Get 到 Webpack Loader 的工作原理與機(jī)制。
創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)提供從項目策劃、軟件開發(fā)，軟件安全維護(hù)、網(wǎng)站優(yōu)化(SEO)、網(wǎ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á)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
Loader 作為 Webpack 的核心機(jī)制，內(nèi)部的工作原理卻非常簡單。接下來我們一起來開發(fā)一個自己的 Loader，通過這個開發(fā)過程來深入了解 Loader 的工作原理。
這里我的需求是開發(fā)一個可以加載 markdown 文件的加載器，以便可以在代碼中直接導(dǎo)入 md 文件。我們都應(yīng)該知道 markdown 一般是需要轉(zhuǎn)換為 html 之后再呈現(xiàn)到頁面上的，所以我希望導(dǎo)入 md 文件后，直接得到 markdown 轉(zhuǎn)換后的 html 字符串，如下圖所示：
由于這里需要直觀地演示，我就不再單獨創(chuàng)建一個 npm 模塊，而是就直接在項目根目錄下創(chuàng)建一個 markdown-loader.js 文件，完成后你可以把這個模塊發(fā)布到 npm 上作為一個獨立的模塊使用。
項目結(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.
'
每個 Webpack 的 Loader 都需要導(dǎo)出一個函數(shù)，這個函數(shù)就是我們這個 Loader 對資源的處理過程，它的輸入就是加載到的資源文件內(nèi)容，輸出就是我們加工后的結(jié)果。我們通過 source參數(shù)接收輸入，通過返回值輸出。這里我們先嘗試打印一下 source，然后在函數(shù)的內(nèi)部直接返回一個字符串'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 配置文件中添加一個加載器規(guī)則，這里匹配到的擴(kuò)展名是.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 函數(shù)是一樣的。
配置完成后，我們再次打開命令行終端運行打包命令，如下圖所示：
打包過程中命令行確實打印出來了我們所導(dǎo)入的 Markdown 文件內(nèi)容，這就意味著 Loader 函數(shù)的參數(shù)確實是文件的內(nèi)容。
但同時也報出了一個解析錯誤，說的是：You may need an additional loader to handle the result of these loaders.（我們可能還需要一個額外的加載器來處理當(dāng)前加載器的結(jié)果）。
那這究竟是為什么呢？其實 Webpack 加載資源文件的過程類似于一個工作管道，你可以在這個過程中依次使用多個 Loader，但是最終這個管道結(jié)束過后的結(jié)果必須是一段標(biāo)準(zhǔn)的 JS 代碼字符串。
所以我們這里才會出現(xiàn)上面提到的錯誤提示，那解決的辦法也就很明顯了：
- 直接在這個 Loader 的最后返回一段 JS 代碼字符串；
- 再找一個合適的加載器，在后面接著處理我們這里得到的結(jié)果。
先來嘗試第一種辦法?；氐?markdown-loader 中，我們將返回的字符串內(nèi)容修改為 console.log('hello loader~')，然后再次運行打包，此時 Webpack 就不再會報錯了，代碼如下所示：
- // ./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 ~")'
- }
那此時打包的結(jié)果是怎樣的呢？我們打開輸出的 bundle.js，找到最后一個模塊（因為這個 md 文件是后引入的），如下圖所示：
這個模塊里面非常簡單，就是把我們剛剛返回的字符串直接拼接到了該模塊中。這也解釋了剛剛 Loader 管道最后必須返回 JS 代碼的原因，因為如果隨便返回一個內(nèi)容，放到這里語法就不通過了。
# 實現(xiàn) Loader 的邏輯
了解了 Loader 大致的工作機(jī)制過后，我們再回到 markdown-loader.js 中，接著完成我的需求。這里需要安裝一個能夠?qū)?Markdown 解析為 HTML 的模塊，叫作 marked。
安裝完成后，我們在 markdown-loader.js 中導(dǎo)入這個模塊，然后使用這個模塊去解析我們的 source。這里解析完的結(jié)果就是一段 HTML 字符串，如果我們直接返回的話同樣會面臨 Webpack 無法解析模塊的問題，正確的做法是把這段 HTML 字符串拼接為一段 JS 代碼。
此時我們希望返回的代碼是通過 module.exports 導(dǎo)出這段 HTML 字符串，這樣外界導(dǎo)入模塊時就可以接收到這個 HTML 字符串了。如果只是簡單地拼接，那 HTML 中的換行和引號就都可能會造成語法錯誤，所以我這里使用了一個小技巧，具體操作如下所示：
- // ./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 字符串，然后再參與拼接，這樣就不會有問題了。
我們回到命令行再次運行打包，打包后的結(jié)果就是我們所需要的了。
除了 module.exports這種方式，Webpack 還允許我們在返回的代碼中使用 ES Modules 的方式導(dǎo)出，例如，我們這里將module.exports修改為 export default，然后運行打包，結(jié)果同樣是可以的，Webpack 內(nèi)部會自動轉(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
- }
# 多個 Loader 的配合
我們還可以嘗試一下剛剛說的第二種思路，就是在我們這個 markdown-loader 中直接返回 HTML 字符串，然后交給下一個 Loader 處理。這就涉及多個 Loader 相互配合工作的情況了。
我們回到代碼中，這里我們直接返回 marked 解析后的 HTML，代碼如下所示：
- // ./markdown-loader.js
- const marked = require('marked')
- module.exports = source => {
- // 1. 將 markdown 轉(zhuǎn)換為 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 屬性修改為一個數(shù)組，以便依次使用多個 Loader。不過同樣需要注意，這里的執(zhí)行順序是從后往前，也就是說我們應(yīng)該把先執(zhí)行的 markdown-loader 放在后面，html-loader 放在前面。
完成以后我們回到命令行終端再次打包，這里的打包結(jié)果仍然是可以的。
至此，我們就完成了這個 markdown-loader 模塊，其實整個過程重點在于 Loader 的工作原理和實現(xiàn)方式。
當(dāng)前文章：如何用5分鐘開發(fā)一個WebpackLoader？
URL鏈接：http://m.5511xx.com/article/djppsgg.html
