1. 基础
loader就是一个函数,当webpack解析资源时会调用相应的loader去处理
loader接收三个参数(content, map, meta)
content: 文件内容
map: source map相关
meta: 其他loader传递过来的参数
2. 简单实现
新建main.js
console.log('hello')
新建test-loader.js
module.exports = function (content) {
console.log(content)
return content
}
配置
rules: [
{
test: /\.js$/,
loader: './loaders/test-loader.js'
}
]
执行 npx webpack 输出打印结果
PS D:\projects\wsource\wl> npx webpack
console.log('hello')
asset static/js/main.js 217 bytes [compared for emit] (name: main) 1 related asset
asset index.html 60 bytes [compared for emit]
./src/main.js 20 bytes [built] [code generated]
webpack 5.74.0 compiled successfully in 169 ms