手写 webpack Plugin and Loader
1.Loader
1.1什么是loader
webpack官网:loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 "load(加载)" 模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件!
个人认为:loader的作用:获取到源码 并对他二次加工
1.2 如何写loader
首先在项目中创建loader文件(文件结构如下)
loader内部是一个function
module.exports = function(source){
console.log(source);
console.log("query:",this.query);
const str = source.replace(/console.log/, "alert");
console.log(`${str} \n console.log('${this.query.name}')`);
return `${str} \n console.log('${this.query.name}')`
}
// const {getOptions} = require('loader-utils');
// module.exports = function(content,map,meta){
// let options = getOptions(this);
//
// content = content.replace(/\{name\}/g,options.name);
//
// return `export default ${JSON.stringify(content)}`;0
// }
而source就是读取的文件源码,当前自定义loader就是劫持源码后将其中的console.log 替换成alert
创建index.js作为打包的入口文件
function time() {
setInterval(()=>{
console.log((new Date()).getTime())
},10000)
}
time()
webpack。config.js中的书写
const path = require('path')
//const cusPlugin = require('./src/plugins/cus-plugin')
//const htmlPlugin = require('./src/plugins/html-plugin')
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src/index.js'),
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
resolveLoader: {
alias: {
'cleanLog-loader': path.resolve(__dirname, 'src/loader/drop-log-loader.js'),
}
},
plugins: [
//new cusPlugin({
//name: '版本1.0'
//}),
// new htmlPlugin()
],
module:{
rules:[
{
test:/\.(js)$/,
use:[{
loader: 'cleanLog-loader',
options: {
name:'cleanLog-loader'
}
},],
exclude: /node_modules/
}
]
},
devServer: {
// 这是配置 dev-server
open: true, // 自动打开浏览器
port: 3000, // 设置启动时候的运行端口
contentBase: 'src', // 指定托管的根目录
hot: true // 启动热更新的第一步
},
}
在package.json中添加dev 和build命令
{
"name": "loader",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.37.1",
"webpack-cli": "^4.7.0"
}
}
执行dev命令后 打包出来的 main.js
eval("function time() {\r\n\tsetInterval(()=>{\r\n\t\talert((new Date()).getTime())\r\n\t},10000)\r\n}\r\ntime() \n console.log('cleanLog-loader')\n\n//# sourceURL=webpack://loader/./src/index.js?");
已经将index.js中的console.log转换为alert。
这只是简单的书写一个demo loader