09-自定义plugin

自定义plugin

webpack的插件是基于事件驱动进行编写的，更多的事件可从webpack官网获得，一个webpack插件包括以下几步：

• 暴露一个JavaScript函数或JavaScript类
• 在其原型中定义apply方法
• 指定要接入的事件钩子（apply方法参数compiler中的hooks属性）
• 操作webpack内部实例的特定数据
• 在功能完成后调用webpack提供的回调（异步事件需要调用提供回调）

同步时刻

class MyPlugin {
	constructor(options) { //接收插件参数
		this.value = options.value;
	}
	apply(compiler) { //在webpack打包时会自动执行该方法
		const value = this.value //暂存value的值
		compiler.hooks //compiler是一个webpack实例，其中有一个钩子，在某时刻自动执行
			.entryOption //在webpack选项中的entry被处理过之后执行
			.tap("MyPlugin", (context, entry) => { //同步钩子使用tap执行
				//第一个参数是当前插件名字，第二个参数是钩子函数
				//context存放了webpack执行的跟路径，entry存放了webpack中的entry选项对象
				console.log(value);
				console.log(context, entry);
			})
	}
}
module.exports = MyPlugin;

异步时刻

class MyPlugin {
	constructor(options) { //接收插件参数
		this.value = options.value;
	}
	apply(compiler) { //在webpack打包时会自动执行该方法
		const value = this.value //暂存value的值
		compiler.hooks //compiler是一个webpack实例，其中有一个钩子，在某时刻自动执行
			.emit //当打包后的代码都放入文件夹之后的时刻，该时刻是异步的
			.tapAsync("MyPlugin", (compilation, callback) => { //异步钩子使用tapAsync执行
				//第一个参数是当前插件名字，第二个参数是钩子函数
				//compilation中存放了这次webpack打包时的所有信息，其中assets属性中存放了打包后的所有文件
				compilation.assets["test.txt"] = { //为该对象添加一个测试文件
					source() { //返回测试文件中的内容函数
						return value; //返回options中的内容
					}
				}
				callback(); //异步钩子函数需要在最后执行callbacks
			})
	}
}
module.exports = MyPlugin;

使用自定义插件

const MyPlugin = require('./plugins/my-plugin.js');
require("clean-webpack-plugin")
module.exports = {
  entry: {
    main: "./index.js"
  },
  plugins: [
    new MyPlugin({
      value:"hello world"
    })
  ]
}