2024年前端最全《webpack5 实战四》之loader(1)，2024年最新算法面试技巧

分享

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

exports.hero =‘德玛西亚’

新建index.js:

import hero from “./hero.js”;

console.log(hero);

接下来执行webpack 打包命令打包，生成dist 下文件，具体webpack 配置见源码。

将打包后的文件引入index.html ，并在浏览器打开。

结果德玛西亚已经替换成了更详细的介绍成功了。

二、loader内联方式

---

---

目标

• 通过内联的方式使用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接口）

四、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:{

heroName:‘寒冰射手’

}

}

] // 看这里，看这里

}

这两个自定义loader ，你在loader 里加上log 是可以验证运行顺序的，是自下而上执行，感兴趣自己验证。

3. 使用验证

select.js ：

module.exports = function selectHero() {

console.log(您选择了英雄);

}

index.js ：

读者福利

========

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

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）