2024年关于Webpack中Loader与Plugin的实践(1)，面试官面试流程话术

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

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

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。

“version”: “1.0.0”,

“description”: “”,

“main”: “index.js”,

“scripts”: {

“test”: “echo “Error: no test specified” && exit 1”,

“build”: “webpack”

},

“keywords”: [],

“author”: “”,

“license”: “ISC”,

“devDependencies”: {

“webpack”: “^4.42.1”,

“webpack-cli”: “^3.3.11”

}

}

index.js

console.log(‘世界上最好的语言是PHP!’)

myLoader.js

const loaderUtils = require(‘loader-utils’);

module.exports = function (source) {

const options = loaderUtils.getOptions(this);

const result = source.replace(‘PHP’, options.name);

return result;

}

webpack.config.js

const path = require(“path”);

module.exports = {

mode: “development”,

entry: {

main: “./src/index.js”,

},

output: {

filename: “[name].js”,

path: path.resolve(__dirname, “dist”),

},

module: {

rules: [

{

test: /.js$/,

use: {

loader: path.resolve(__dirname, “./loaders/myLoader.js”),

options: {

name: “JavaScript”,//这里就是你要替换的值

},

},

},

],

},

};

好了，到此为止我们已经成功地写了一个loader，接下来我们就测试一下是否真的work！运行npm run build之后会输出一个dist文件夹，里面有一个main.js文件，盘它。

03 Plugin

---

相对于Loader来说，其实plugin的机制更加灵活，它可以在webpack的运行过程中改变输出结果。简单来说就是为输出添砖加瓦。

常见Plugin

• extract-text-webpack-plugin:把JS中的css代码提到单独文件中

• webpack-parallel-uglify-plugin:多进程代码压缩

• html-webpack-plugin:简化HTML文件创建

• dll-plugin:提高webpack构建速度

• ignore-plugin：忽略部分文件

Plugin的工作原理

我们先来看一下简单的插件是怎么编写出来的：

class myPlugin {

constructor(options){

}

apply(complier){

complier.plugin(‘compilation’,function(compilation){

})

}

}

//导出

module.exports = myPlugin;

工作流程：

• webpack启动，执行new myPlugin(options)，初始化插件并获取实例

• 初始化complier对象，调用myPlugin.apply(complier)给插件传入complier对象

• 插件实例获取complier，通过complier.plugin监听webpack广播的事件，通过complier对象操作webpack

Plugin编写

俗话说，talk is cheap,show me the code

还是沿用上面的代码结构,在根目录下面建一个myPlugins文件夹，里面建一个myPlugin.js文件，我们就自定义一个plugin：

class myPlugin {

constructor(doneCallback, failCallback) {

this.doneCallback = doneCallback;

this.failCallback = failCallback;

}

apply(compiler) {

compiler.hooks.done.tap(‘myPlugin’, (stats) => {

this.doneCallback(stats);

});

compiler.hooks.failed.tap(‘myPlugin’, (err) => {

this.failCallback(err);

});

}

}

module.exports = myPlugin;

然后我们在webpack.config.js文件里面先引入插件，然后配置插件即可。

还是先打包一下，你会发现在打包过程中，webpack会广播默认的事件，这里我就监听了webpack的done事件(webpack构建成功，即将退出)和fail事件(webpack构建失败，即将退出)。

const myPlugin = require(“./plugins/myPlugin”);

module.exports = {

plugins: [

new myPlugin(

() => {

//throw new Error(‘Error!’)

console.log(“成功监听到结束事件，可以执行你想要的函数！”);

},

(error) => {

console.log(error);

}

),

],

}

我们运行之后发现是可以监听的，这里我把两种情况都试一下。首先正常构建，然后手动抛出错误，结果如下：

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

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

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法