Webpack loader 的工作原理
阿新 • • 發佈:2020-08-09
Loader 作為 Webpack 的核心機制,內部的工作原理卻非常簡單。
每個 Webpack 的 Loader 都需要匯出一個函式,這個函式就是我們這個 Loader 對資源的處理過程,它的輸入就是載入到的資原始檔內容,輸出就是我們加工後的結果。我們通過 source 引數接收輸入,通過返回值輸出。
對於返回的輸出,有兩種思路:
- 直接在這個 Loader 的最後返回一段 JS 程式碼字串;
- 再找一個合適的載入器,在後面接著處理我們這裡得到的結果
Webpack 載入資原始檔的過程類似於一個工作管道,你可以在這個過程中依次使用多個 Loader,但是最終這個管道結束過後的結果必須是一段標準的 JS 程式碼字串。
// ./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
}