【Webpack5笔记】loader的概念以及手写clean-log-loader、banner-loader、babel-loader和file-loader

},

],

},

1、手写clean-log-loader

====================

作用：用来清理 js 代码中的console.log语句

/console\.log\(.*\);?/g,“”

红色反斜杠是转义，**.*为任何内容都可以，;?为有没有分号都可以，g为全局生效，" "**为替换为空。

// loaders/clean-log-loader.js

module.exports = function cleanLogLoader(content) {

// 将console.log替换为空

return content.replace(/console.log(.*);?/g, “”);

};

2、手写banner-loader

=================

作用：给 js 代码添加文本注释

文件地址：loaders/banner-loader/index.js

const schema = require(“./schema.json”);

module.exports = function (content) {

// 获取loader的options，同时对options内容进行校验

// schema是options的校验规则（符合 JSON schema 规则）

const options = this.getOptions(schema); //schema对options进行约束

const prefix = `

/*

• Author: ${options.author}

*/

`;

return ${prefix} \n ${content};

};

文件地址：loaders/banner-loader/schema.json

对options进行约束，只约束了author性质为字符串，不能出现其他属性：

{

“type”: “object”,

“properties”: {

“author”: {

“type”: “string”

}

},

“additionalProperties”: false

}

webpack.config.js

{

test:/.js$/,

loader:“/loader/banner-loader”

options:{

author:“老王”,

}

}

3、手写babel-loader

================

作用：编译 js 代码，将 ES6+语法编译成 ES5-语法。

@babel/core · Babel 中文文档 (docschina.org)")

下载依赖

npm i @babel/core @babel/preset-env -D

文件地址：loaders/babel-loader/index.js

const schema = require(“./schema.json”);

const babel = require(“@babel/core”);

module.exports = function (content) {

const options = this.getOptions(schema);

// 使用异步loader

const callback = this.async();

// 使用babel对js代码进行编译

babel.transform(content, options, function (err, result) {

callback(err, result.code);

});

};

文件地址：loaders/babel-loader/schema.json

{

“type”: “object”,

“properties”: {

“presets”: {

“type”: “array”

}

},

“additionalProperties”: true

}

webpack.config.js

{

test:/.js$/,

loader:“/loader/babel-loader”

options:{

presets:[“@babel/preset-env”],

}

}

4、手写file-loader

================

作用：将文件原封不动输出出去

下载包，一个工具函数，生产带hash值的文件

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！