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 
}