一、loader
webpack做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定的文件中。
更多的功能需要借助webpack loaders和webpack plugins完成。
webpack loader: loader本质上是一个函数,它的作用是将某个源码字符串转换成另一个源码字符串返回。
loader函数的将在模块解析的过程中被调用,以得到最终的源码。
全流程:
chunk中解析模块的流程:
1.处理loaders流程
//index.js
变量 a = 1;
// loaders/test-loader
module.exports = function(sourceCode){
return sourceCode.replace(/变量/g,'var');
}
// webpack.config.js
module.exports = {
mode: "development",
module: {
rules: [
{
test: /index\.js$/,
use: [
{
loader: './loaders/test-loader'
}
]
}
]
}
}
最后main.js中变成无误代码
2.loader配置
完整配置
module.exports = {
module: { //针对模块的配置,目前版本只有两个配置,rules、noParse
rules: [ //模块匹配规则,可以存在多个规则
{ //每个规则是一个对象
test: /\.js$/, //匹配的模块正则
use: [ //匹配到后应用的规则模块
{ //其中一个规则
loader: "模块路径", //loader模块的路径,该字符串会被放置到require中
options: { //向对应loader传递的额外参数
}
}
]
}
]
}
}
简化配置
module.exports = {
module: { //针对模块的配置,目前版本只有两个配置,rules、noParse
rules: [ //模块匹配规则,可以存在多个规则
{ //每个规则是一个对象
test: /\.js$/, //匹配的模块正则
use: ["模块路径1", "模块路径2"]//loader模块的路径,该字符串会被放置到require中
}
]
}
}
3.loader匹配规则
从上往下匹配
//loader1.js
module.exports = function(sourceCode){
console.log("loader1");
return sourceCode;
}
//loader2.js
module.exports = function(sourceCode){
console.log("loader2");
return sourceCode;
}
//loader3.js
module.exports = function(sourceCode){
console.log("loader3");
return sourceCode;
}
//loader4.js
module.exports = function(sourceCode){
console.log("loader4");
return sourceCode;
}
// webpack.config.js
module.exports = {
mode: "development",
module: {
rules: [
{
test: /index\.js$/, //正则表达式,匹配模块的路径
use: ["./loaders/loader1", "./loaders/loader2"] //匹配到了之后,使用哪些加载器
}, //规则1
{
test: /\.js$/, //正则表达式,匹配模块的路径
use: ["./loaders/loader3", "./loaders/loader4"] //匹配到了之后,使用哪些加载器
} //规则2
], //模块的匹配规则
}
}
最后将loader4结果返回给loader3,再返回给loader2,最后loader1
这里如果index.js依赖a.js
a.js又匹配到loader3和loader4
注意注意!!!!
由于要对打包文件进行loader规则处理,所以要在打包过程中读取loader文件,即在node环境中,所以这里使用commonJs
二、plugin
loader的功能定位是转换代码,而一些其他的操作难以使用loader完成,比如:
- 当webpack生成文件时,顺便多生成一个说明描述文件
- 当webpack编译启动时,控制台输出一句话表示webpack启动了
- 当xxxx时,xxxx
这种类似的功能需要把功能嵌入到webpack的编译流程中,而这种事情的实现是依托于plugin的
plugin的本质是一个带有apply方法的对象
var plugin = {
apply: function(compiler){
}
}
通常,习惯上,我们会将该对象写成构造函数的模式
class MyPlugin{
apply(compiler){
}
}
var plugin = new MyPlugin();
要将插件应用到webpack,需要把插件对象配置到webpack的plugins数组中,如下:
module.exports = {
plugins:[
new MyPlugin()
]
}
// webpack.config.js
var MyPlugin = require("./plugins/MyPlugin");
module.exports = {
mode: "development",
watch: true,
plugins: [
new MyPlugin()
]
}
apply函数会在webpack编译的初始化阶段,创建好Compiler对象后运行。
compiler对象是在初始化阶段构建的,整个webpack打包期间只有一个compiler对象,后续完成打包工作的是compiler对象内部创建的compilation
apply方法会在创建好compiler对象后调用,并向方法传入一个compiler对象
compiler对象提供了大量的钩子函数(hooks,可以理解为事件),plugin的开发者可以注册这些钩子函数,参与webpack编译和生成。
你可以在apply方法中使用下面的代码注册钩子函数:
class MyPlugin{
apply(compiler){
compiler.hooks.事件名称.事件类型(name, function(compilation){
//事件处理函数
})
}
}
// ./plugins/MyPlugin
module.exports = class MyPlugin {
apply(compiler) {
//在这里注册事件,类似于window.onload $(function(){})
compiler.hooks.done.tap("MyPlugin-done", function(compilation){
//事件处理函数
console.log("编译完成");
})
}
}
如果使用watch实时监测需打包的文件内容是否改变,每次改变后打包时都会触发该注册事件
1.事件名称
即要监听的事件名,即钩子名,所有的钩子:https://www.webpackjs.com/api/compiler-hooks
2.事件类型
这一部分使用的是 Tapable API,这个小型的库是一个专门用于钩子函数监听的库。
它提供了一些事件类型:
- tap:注册一个同步的钩子函数,函数运行完毕则表示事件处理结束
- tapAsync:注册一个基于回调的异步的钩子函数,函数通过调用一个回调表示事件处理结束
- tapPromise:注册一个基于Promise的异步的钩子函数,函数通过返回的Promise进入已决状态表示事件处理结束
3.处理函数
处理函数有一个事件参数compilation