目錄
- 啰嗦兩句
- [loader 是干什么的](#loader 是干什么的)
- [loader 的工具箱 --context](#loader 的工具箱 --context)
- [loader 實戰](#loader 實戰)
啰嗦兩句
學習這件事從學習動機上來看，可以分成兩種情況：主動學習和被動學習。主動學習就是，某天你瀏覽網頁的時候，看到一個酷到沒朋友的效果，趕緊打開開發者工具，看看用了什么 css 屬性，用了什么庫或者框架實現的，這是主動學習。
還有一種是被動學習。就拿我來說，之前用 mpvue 寫小程序的時候，頁面的 json 配置都是寫在 main.js 里面的，loader 會從 main.js 解析出對應的代碼塊，然后為我生成對應的配置文件。但是前兩天，當我又初始化一個新項目的時候（使用的是 mpvue-loader1.1.4），這個好用的特性居然消失了，我需要在目錄下自己手動建一個 json 文件寫頁面配置。
人有這么一種本性，從不好的體驗切換到好的體驗很快，但是再切回去就很難受😢。所以，這回只有硬着頭皮寫個 webpack loader 來回歸原來的體驗了。實現的功能很簡單，就是重新實現 mpvue 原有的功能，從 js 文件中解析出配置項的內容，並生成一個json文件到對應的文件夾中。
loader 是干什么的
無圖言卵，先上個圖：
把 webpack 想像成一個工廠，loader 就是一個個身懷絕技的流水線工人，有的會處理 svg，有的會壓縮 css 或者圖片，有的會處理 less，有的會將 es6 轉換為 es5。他們在 webpack 的調度下 (確切的說是 loader-runer)，井井有條的完成自己工作后，把自己處理的結果交給下一個工人，直到最后由 webpack 將他們的勞動成果生成 dist 目錄下的文件。
所以一個 loader 用一個函數來表示，應該是這樣的：
module.exports = function(content, map, meta) {
return content;
};
上面我們就定義了一個什么都不干還拿工資的 loader，它就是拿到內容后原樣交給下一個 loader 同學。但是，它現在其實還只是一個函數 -- 因為它還沒有混入 webpack loader 內部啊，現在我們幫他打入 webpack 的 loader 內部：
// webpack.config.js
...
module: {
rules: [
{
test: /\.js$/,
include: [resolve('src'), resolve('test')],
use: [
{
loader: path.resolve('path/to/my-loader.js'), // 本 loader😊
options: {a: 1}
},
... 其他 loader
]
}
]
}
作為一個什么都不做的 loader，它在 rules 下面使用 /\.js$/ 這個正則表達式，告 (hu) 訴 (you) webpack 它可以處理 js 文件, 還通過 includes 字段，說明了它的業務范圍只負責 src 和 test 目錄下的 js 文件。
現在回到上面的圖，大部分 loader 還是實實在在辦事的。有的可以處理文本文件，如 css 預處理，進去的是 less 語法的文件，出來的是 css 語法的文件；有的可以處理二進制文件，比如將較小的圖片變成 base64 字符串。還有的 loader 買一送二，比如 mpvue-loader, 輸入的是 vue 文件，但是會輸出 wxss,wxml,js 三個文件。但是，這些工作僅靠 loader 自己是辦不到的，它需要和 webpack 溝通。也就是說，干活是需要工具的，這個工具就是 loader 的上下文 (context)。
loader 的工具箱 --context
根據 官方文檔 的解釋，loader context 表示在 loader 內使用 this 可以訪問的一些方法或屬性。還是在上面的那個啥都不干 loader 上說明：
const path = require('path')
module.exports = function(content){
console.log('resource', this.resource) // 文件路徑帶 query
console.log('query', this.query)// 對應配置中的 options {a: 1}
console.log('resourcePath', this.resourcePath)// 文件路徑
this.emitFile('main.json', JSON.stringify({hello: 'world'}))// dist目錄下生成一個 json 文件
this.emitWarning('這個 loader 啥都不干')// 會觸發一個警告⚠️
// this.emitError('這個 loader 啥都不干')// 會導致本次編譯過程失敗
return content
}
正如上面的例子那樣，有了上下文提供的工具包，loader 就可以干更多的事情而不只是對 content 進行處理，比如：
- 通過 this.emitError 向 webpack 拋出一個錯誤，中斷本次編譯
- 通過 this.emitFile 生成一個新的文件，emitFile接受的第一個參數是相對於dist目錄的文件路徑
- 通過 this.resource 獲得資源路徑
loader 實戰
把這些了解清楚之后，我們就可以實現之前想要的功能了：從所有文件名為 main.js 的文件中提取 export default 的內容，並在同級目錄下生成一個 json 文件，如下所示：
// 生成前 src 目錄
page
|-main.js
// 生成后 dist 目錄
page
|-main.js
|-main.json
全部代碼如下，解釋見注釋：
module.exports = function(source){
if(/main\.js$/.test(this.resource)){// 只處理 main.js 文件
let jsonPath = this.resource.replace(/.+src\//, '') +'on'// 生成 json 文件相對於 dist 目錄的路徑
let re = /export\s+?default\s*(\{[\s\S]+\})/m; // 解析出文件中的 export default 代碼塊
if (re.test(source)) {
let config = eval('a=' + re.exec(source)[1]); // 將配置轉成對象
console.log(config)
this.emitFile(jsonPath, JSON.stringify(config)); // 寫到文件中
}
}
return source;
}
這就是本文的全部內容了，今天參加了同學的婚禮，見了幾個老同學，包括還在船廠🚢 打拼的同學。吃飯的時候聊着大家的現狀，真的很開心，沒有想象中的局促和無話可說。轉眼畢業都三年了，時間過的真 tm 快。（完）