最后
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
实现准则
-
简单【Simple】loader只做单一任务，多个loader > 一个多功能loader
-
链式【Chaining】遵循链式调用原则
-
无状态【Stateless】即函数式里的Pure Function，无副作用
-
使用工具库【Loader Utilities】充分利用 loader-utils 包
实现一个简单的loader，功能是替换console.log、去除换行符、在文件结尾处增加一行自定义内容
/** webpack.config.js */
const path = require(“path”);
module.exports = {
entry: {
index: path.resolve(__dirname, “src/index.js”),
},
output: {
path: path.resolve(__dirname, “dist”),
},
module: {
rules: [
{
test: /.js$/,
use: [
{
loader: path.resolve(“lib/loader/loader1.js”),
options: {
message: “this is a message”,
}
}
],
},
],
},
};
/** lib/loader/loader1.js */
const loaderUtils = require(‘loader-utils’);
/** 过滤console.log和换行符 */
module.exports = function (source) {
// 获取loader配置项
const options = loaderUtils.getOptions(this);
console.log(‘loader配置项:’, options);
const result = source
.replace(/console.log(.*);?/g, “”)
.replace(/\n/g, “”)
.concat(console.log("${options.message || '没有配置项'}"););
return result;
};
异步loader如何编写
/** lib/loader/loader1.js */
/** 异步loader */
module.exports = function (source) {
let count = 1;
// 1.调用this.async() 告诉webpack这是一个异步loader，需要等待 asyncCallback 回调之后再进行下一个loader处理
// 2.this.async 返回异步回调，调用表示异步loader处理结束
const asyncCallback = this.async();
const timer = setInterval(() => {
console.log(时间已经过去${count++}秒);
}, 1000);
// 异步操作
setTimeout(() => {
clearInterval(timer);
asyncCallback(null, source);
}, 3200);
};
4. Plugin
在webpack编译整个生命周期的特定节点执行特定功能
实现要点：
-
一个命名JS函数或者JS类
-
在prototype上定义一个apply方法（供webpack调用，并且在调用时注入 compiler 对象）
-
在 apply 函数中需要有通过 compiler 对象挂载的 webpack 事件钩子（钩子函数中能拿到当前编译的 compilation 对象）
-
处理 webpack 内部实例的特定数据
-
功能完成后调用 webpack 提供的回调
基本模型：
// 1、Plugin名称
const MY_PLUGIN_NAME = “MyBasicPlugin”;
class MyBasicPlugin {
// 2、在构造函数中获取插件配置项
constructor(option) {
this.option = option;
}
// 3、在原型对象上定义一个apply函数供webpack调用
apply(compiler) {
// 4、注册webpack事件监听函数
compiler.hooks.emit.tapAsync(
MY_PLUGIN_NAME,
(compilation, asyncCallback) => {
// 5、操作Or改变compilation内部数据
console.log(compilation);
console.log(“当前阶段 ======> 编译完成，即将输出到output目录”);
// 6、如果是异步钩子，结束后需要执行异步回调
asyncCallback();
}
);
}
}
// 7、模块导出
module.exports = MyBasicPlugin;
实现一个plugin，功能是在dist目录自动生成README文件：
const MY_PLUGIN_NAME = “MyReadMePlugin”;
// 插件功能：自动生成README文件，标题取自插件option
class MyReadMePlugin {
constructor(option) {
this.option = option || {};
}
apply(compiler) {
compiler.hooks.emit.tapAsync(
MY_PLUGIN_NAME,
(compilation, asyncCallback) => {
compilation.assets[“README.md”] = {
// 文件内容
source: () => {
return # ${this.option.title || '默认标题'};
},
// 文件大小
size: () => 30,
};
asyncCallback();
}
);
}
}
// 7、模块导出
module.exports = MyReadMePlugin;
compiler.hooks 上挂载了不同时期触发的webpack事件函数（类似于React生命周期），可以在编译的各个阶段执行其他逻辑或者改变输出结果，具体支持的事件列表可以看这里：compiler-hooks
Tapable：
webpack 的插件架构主要基于 Tapable 实现的，Tapable 是 webpack 项目组的一个内部库，主要是抽象了一套插件机制。它类似于 NodeJS 的 EventEmitter 类，专注于自定义事件的触发和操作。
Tapable事件类型分为同步和异步，内部又以不同的规则分为不同类型，上述事件的具体区别可以看 这篇文章，理解这些事件的区别和应用场景有助于我们理解webpack源码和编写Plugin
Complier对象：
在webpack启动时被初始化一次，全局唯一，可以理解为webpack编译实例，它包含了webpack原始配置、Loader、Plugin引用、各种钩子
部分源码：https://github.com/webpack/webpack/blob/10282ea20648b465caec6448849f24fc34e1ba3e/lib/webpack.js
5. 性能优化
1. 从何开始？
- 使用 speed-measure-webpack-plugin 测量打包速度
- 使用 webpack-bundle-analyzer 进行体积分析
从某项目的分析图可以看出一个很明显的优化空间就是 BizCharts 没有按需引入，这时候我们可以import路径再执行一次打包分析看效果。
另外图中每个模块都有三种Size，分别是 Stat Size、Parsed Size、Gzipped Size，这三者的分别代表什么含义可以看下插件的github issue
2. 优化Loader配置
思路主要是优化搜索时间、缩小文件搜索范围、减少不必要的编译工作，具体做法可以看以下配置文件
module .exports = {
module : {
rules : [{
// 如果项目源码中只有 文件，就不要写成/\jsx?$/，以提升正则表达式的性能
test: /.js$/,
// babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启
use: [‘babel-loader?cacheDirectory’] ,
// 只对项目根目录下 src 目录中的文件采用 babel-loader
最后
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
89
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
