1. 程式人生 > 實用技巧 >Webpack loader 的工作原理

Webpack loader 的工作原理

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 
}