什么是loader
webpack官方對(duì)loader的描述：
loader 用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。loader 可以使你在 import 或"加載"模塊時(shí)預(yù)處理文件胖喳。
loader 可以將文件從不同的語言（如 TypeScript）轉(zhuǎn)換為 JavaScript旺订，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL该编。
loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件
實(shí)際項(xiàng)目中經(jīng)常用到的幾個(gè)loader
- url-loader : 可以將諸如圖片的靜態(tài)文件打包，對(duì)于小于某個(gè)值的圖片爷辙，可以直接轉(zhuǎn)為base64形式。
- less-loader : 將less轉(zhuǎn)為css
- postcss-loader : 為css加上前綴如 -webkit -ms -moz ...
自己實(shí)現(xiàn)一個(gè)loader
一個(gè)簡(jiǎn)單的loader:
/* index.js */
console.log("loader");
/* /loader/test-loader.js */
// webpack官方推薦的工具包
const loaderUntils = require("loader-utils");
/*
* 定義一個(gè)loader處理函數(shù) 比如這個(gè)loader是用來處理.js文件的,
* source就是js文件里的代碼
* 處理完成后 朦促，必須將內(nèi)容返回
*/
module.exports = function(source) {
// options 就是 webpack.config.js 里配置loader時(shí)定義的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指向會(huì)有問題
這只是最簡(jiǎn)單的情況，實(shí)際上一些loader還會(huì)有異步處理或者返回多個(gè)值的情況思灰，需要使用callback來完成玷犹。
示例：
/* 返回多個(gè)值的情況 */
module.exports = function(source) {
const result = source.replace("loader", "hello world")
this.callback(null, result);
};
/* 需要異步處理的情況 */
module.exports = function(source) {
//定義?一個(gè)異步處理理 返回的就是this.callback
const callback = this.async();
setTimeout(() => {
const result = source.replace("loader", "hello world")
callback(null, result)
}, 3000)
}
編輯一個(gè)loader的步驟并不繁瑣，難度取決于需要這個(gè)loader完成什么樣的任務(wù)，另外設(shè)計(jì)上應(yīng)該遵循 單一職責(zé) 的原則歹颓，復(fù)雜的操作可以由多個(gè)loader配合完成坯屿。
