webpack自定义loader和plugin

  |  

loader

每一个loader, 其实就是一个函数

// source 要转换的内容, sourceMap 内容的sourceMap
module.exports = function test (source,sourceMap) {
//loader处理模块
//多个loader是有顺序的
//一定要有返回值
// console.log(this, this.query, source);
// console.log(result);
const callback = this.async();
setTimeout(() => {
const result = source.replace("hello", this.query.name);
// return result;
callback(null, result);
}, 3000);

// return result;
//this.callback(null,code,map,ast),返回多个信息
this.callback(null, result);
};
// 如果loader带pitch方法,同时带返回值,那么后续的loader都不执行
// test.pitch = function(){
// console.log('test')
// }

然后配置webpack.config.js文件的loader使用上面的函数即可

module.exports = {
...
resolveLoader: {
alias: {
"babel-loader": path.resolve(__dirname, 'loaders/babel-loader.js')
// 或者下面的写法
modules: [path.resolve(__dirname,'loaders'), "node_modules"]
},
// 或者用数组表述, 即先去 ./myLoaders下面先找,然后再到node_odules去找
modules: ["node_modules", "./myLoaders"],
}
}

loader运行的总体流程

  • Complier.js会将用户配置与默认配置合并,其中就包括loader部分
  • webpack 会根据配置常见 NormalModuleFactory, 它可以用来创建NormalModule
  • 在工厂创建NormalModule实例之前还要通过loader的resolve来解析loader的路径
  • 在NormalModule实例创建之后,则会通过其build方法来进行模块的构建。构建模块的第一步
    就是使用loader来加载并处理模块内容。而loader-runner这个库就是webpack中loader的运行器
  • 最后,将loader处理完的模块内容输出,进入后续的编译流程
// source 要转换的内容, sourceMap 内容的sourceMap
module.exports = function test (source,sourceMap) {
//this.callback(null,code,map,ast)
this.callback(null, result);
};
// 如果loader带pitch方法,同时带返回值,那么后续的loader都不执行
// test.pitch = function(){
// console.log('test')
// }

/**
* loader1 | loader2 | loader3
* 一般先执行 loader3 -> loader2 -> loader 1
* 但是如果loader2带有pitch方法,并且有返回,那么 loader2和loader3将不会执行
* 其实loader的真正的执行流程是 loader1.pitch -> loader2.pitch -> loader3.pitch -> loader3 -> loader2 -> loader1
*/

Plugin

在webpack运行的声明周期中会广播许多事件,plugin可以监听这些事件,在特定的时刻调用webpack提供的API执行相应的操作。

webpack 插件是一个具有 apply 方法的 JavaScript 对象。apply 方法会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问。

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
// 构造器参数,用于传递options
constructor(options) {
console.log("current plugin option is" + JSON.stringify(options))
}
// apply 方法是一个插件所必须的
apply(compiler) {
// compiler 继承自 tapable
// tapable 提供了多种 hooks https://github.com/webpack/tapable#hook-types
// run 是 AsyncSeriesHook实例 [tapable提供的多种hooks的一种]
compiler.hooks.run.tap(pluginName, compilation => {
console.log('webpack 构建过程开始!');
});
}
}

module.exports = ConsoleLogOnBuildWebpackPlugin

然后在webpack.config.js中配置

var ConsoleLogOnBuildWebpackPlugin = require("./plugin/ConsoleLogOnBuildWebpackPlugin")
// 其他代码略去
//...

module.exports = {
plugins: [
new ConsoleLogOnBuildWebpackPlugin({value: "$$"})
]
}

×

纯属好玩

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. loader
  2. 2. loader运行的总体流程
  3. 3. Plugin
,