什么是loader
webpack官方對loader的描述：
loader 用于對模塊的源代碼進行轉(zhuǎn)換。loader 可以使你在 import 或"加載"模塊時預處理文件。
loader 可以將文件從不同的語言（如 TypeScript）轉(zhuǎn)換為 JavaScript，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL。
loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件
實際項目中經(jīng)常用到的幾個loader
- url-loader : 可以將諸如圖片的靜態(tài)文件打包，對于小于某個值的圖片，可以直接轉(zhuǎn)為base64形式。
- less-loader : 將less轉(zhuǎn)為css
- postcss-loader : 為css加上前綴如 -webkit -ms -moz ...
自己實現(xiàn)一個loader
一個簡單的loader:
/* index.js */
console.log("loader");
/* /loader/test-loader.js */
// webpack官方推薦的工具包
const loaderUntils = require("loader-utils");
/*
* 定義一個loader處理函數(shù) 比如這個loader是用來處理.js文件的,
* source就是js文件里的代碼
* 處理完成后 ，必須將內(nèi)容返回
*/
module.exports = function(source) {
// options 就是 webpack.config.js 里配置loader時定義的options
const options = loaderUntils.getOptions(this);
console.log(source, options)
console.log(options);
// 將代碼里的hello 替換為hello world
return source.replace("loader", "hello world")
};
webpack.config.js :
const path = require("path");
module.exports = {
mode: "development",
entry: {
main: "./src/index.js"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].[hash].js"
},
module: {
rules:[{
test: /\.js$/,
use: [
{
loader: path.resolve(__dirname, "./loader/test-loader.js"),
options: {
name: "t1"
}
}
],
}]
}
}
打包結(jié)果：
image.png
需要注意的是，不要使用箭頭函數(shù)來定義loader, 否則this指向會有問題
這只是最簡單的情況，實際上一些loader還會有異步處理或者返回多個值的情況，需要使用callback來完成。
示例：
/* 返回多個值的情況 */
module.exports = function(source) {
const result = source.replace("loader", "hello world")
this.callback(null, result);
};
/* 需要異步處理的情況 */
module.exports = function(source) {
//定義?一個異步處理理 返回的就是this.callback
const callback = this.async();
setTimeout(() => {
const result = source.replace("loader", "hello world")
callback(null, result)
}, 3000)
}
編輯一個loader的步驟并不繁瑣，難度取決于需要這個loader完成什么樣的任務，另外設(shè)計上應該遵循 單一職責 的原則，復雜的操作可以由多個loader配合完成。
