最后
正值招聘旺季,很多小伙伴都询问我有没有前端方面的面试题!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
}
这样一个loader 就创建完成了,接下来使用loader
2. 使用自定义loader
在webpack.config.js
文件里:
{
test:/.js$/,
use: “./src/custom-loader/hero-loader.js”, // 看这里,看这里
}
这里use
存放自定义loader 文件 存放路径
3. 使用验证
新建hero.js:
exports.hero =‘德玛西亚’
新建index.js:
import hero from “./hero.js”;
console.log(hero);
接下来执行webpack
打包命令打包,生成dist 下文件,具体webpack 配置见源码。
将打包后的文件引入index.html ,并在浏览器打开。
结果德玛西亚已经替换成了更详细的介绍成功了。
目标
-
通过内联的方式使用loader
-
别名载入loader
1. 新建自定义loader 文件
skill-loader:
module.exports = function (source) {
return source.replace(“大宝剑”,“R技能是:大宝剑!”)
}
2. webpack config 配置别名加载
resolveLoader:{
alias:{
‘skill-loader’:resolve(__dirname,‘src/custom-loader/skill-loader.js’)
}
}
3. 内联使用
skill.js:
exports.skill = ‘大宝剑’
index.js 引入:
import skill from “!skill-loader!./skill.js”;
console.log(skill);
4. 执行webpack 命令验证
打包之后的文件:
/***/ “./src/hero.js”:
/!*******************!\
!*** ./src/hero.js ***!
*********************/
/***/ ((__unused_webpack_module, exports) => {
eval(“/*\n * @Author: ZY\n * @Date: 2022-02-14 16:26:29\n * @LastEditors: ZY\n * @LastEditTime: 2022-02-14 16:27:33\n * @FilePath: /webpack-demo/packages/loader-demo/src/hero.js\n * @Description: 文件描述\n */\n\nexports.hero =‘英雄联盟保健哥:德玛西亚!’\n\n//# sourceURL=webpack:///./src/hero.js?”);
/***/ }),
/***/ “./src/index.js”:
/!********************!\
!*** ./src/index.js ***!
**********************/
/***/ ((__unused_webpack_module, webpack_exports, webpack_require) => {
“use strict”;
eval(“webpack_require.r(webpack_exports);\n/* harmony import / var hero_js__WEBPACK_IMPORTED_MODULE_0_ = webpack_require(/! ./hero.js / “./src/hero.js”);\n/ harmony import / var skill_loader_skill_js__WEBPACK_IMPORTED_MODULE_1_ = webpack_require(/! !skill-loader!./skill.js / “./src/custom-loader/skill-loader.js!./src/skill.js”);\n/\n * @Author: ZY\n * @Date: 2022-02-14 11:44:14\n * @LastEditors: ZY\n * @LastEditTime: 2022-02-14 16:48:22\n * @FilePath: /webpack-demo/packages/loader-demo/src/index.js\n * @Description: 文件描述\n */\n\n\n\n\nconsole.log(hero_js__WEBPACK_IMPORTED_MODULE_0_);\nconsole.log(skill_loader_skill_js__WEBPACK_IMPORTED_MODULE_1_);\n\n//# sourceURL=webpack:///./src/index.js?”);
/***/ }),
/***/ “./src/custom-loader/skill-loader.js!./src/skill.js”:
/!********************************************************!\
!*** ./src/custom-loader/skill-loader.js!./src/skill.js ***!
**********************************************************/
/***/ ((__unused_webpack_module, exports) => {
eval(“/*\n * @Author: ZY\n * @Date: 2022-02-14 16:26:35\n * @LastEditors: ZY\n * @LastEditTime: 2022-02-14 16:28:04\n * @FilePath: /webpack-demo/packages/loader-demo/src/skill.js\n * @Description: 文件描述\n */\n\nexports.skill = ‘R技能是:大宝剑!’\n\n//# sourceURL=webpack:///./src/skill.js?./src/custom-loader/skill-loader.js”);
/***/ })
可以对比看一下内联和webpack rule 配置有什么区别
- 收集代码map的时候key是不同的,内两方式会加上loader path
index.html 引入打包js之后运行结果:
了解基础loader使用之后,看看loader 的其他高级接口。
官网很详细这里就不一一赘述(官网loader接口)
设置loader 的时候有一些需要外界环境的变量,这些变量可以在配置中设置。
webpack config提供 loader 配置options。下面是一个小例子,来演示这个情景。
1. 新建select-hero-loader
这个loader 的意思很明白,我要选择英雄,通过loader 打包到浏览器,告诉我选择的什么英雄。
这里会利用loader 接口:
-
query 或者 getOptions 获取变量
-
resourcePath 定位使用loaderjs 使用
select-hero-loader.js :
module.exports = function (source) {
const {heroName} = this.query
//也可以查出options map
// const {heroName} = this.getOptions()
if (heroName && this.resourcePath.endsWith(‘select.js’)) {
this.callback(null,source.replace(‘您选择了英雄’,您选择了英雄:${heroName}
))
}
return source
}
2. webpack config 配置
这里针对于单个文件使用其实使用内联的方式更简单,但是这里为了联系所以采用rule 的方式配置,保留之前的loader。
{
test:/.js$/,
use: [
“./src/custom-loader/hero-loader.js”,
{
loader:“select-hero-loader”,
options:{
最后
总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
,
use: [
“./src/custom-loader/hero-loader.js”,
{
loader:“select-hero-loader”,
options:{
最后
总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了
[外链图片转存中…(img-Fn17Wadt-1715019677341)]
[外链图片转存中…(img-YqcoGJFJ-1715019677342)]