简介

Webpack 是基于插件机制的。 Webpack 插件是⼀个具有 apply ⽅法的 JavaScript 对象。apply ⽅法会被 webpack compiler 调⽤， 并且在整个编译⽣命周期都可以访问 compiler 对象。 插件原理：通过在⽣命周期的钩⼦中挂载函数，来实现功能扩展。 插件详情：https://webpack.docschina.org/concepts/plugins/

⽣命周期

⽣命周期就是整个⽣命过程中的关键节点 ⼈：出⽣ -> ⼊学 -> 毕业 -> 结婚 -> ⽣⼦ -> 死亡 程序：初始化 -> 挂载 -> 渲染 -> 展示 -> 销毁

钩⼦

钩⼦是提前在可能增加功能的地⽅，埋好(预设)⼀个函数 简单理解：钩⼦是⽣命周期中的函数 经过某个站点的时候，我们可能会做些事情。站点就是可能增加功能的地⽅，可以理解为钩⼦。 Webpack 的钩⼦详情：https://www.webpackjs.com/api/compiler-hooks/

常⽤钩⼦

⾃定义 plugin - 图1

⾃定义 plugin - 图2

⾃定义插件

声明⾃定义插件

// 声明⾃定义插件 class MyPlugin { constructor(options) { console.log(‘插件配置选项‘, options) this.userOptions = options || {} } // 必须声明 apply ⽅法 apply(compiler) { // 在钩⼦上挂载功能 compiler.hooks.emit.tap(‘MyPlugin’, compilation => { // compilation 是此次打包的上下⽂ for (const name in compilation.assets) { console.log(name) // 针对 css ⽂件，执⾏相关操作 // if (name.endsWith(‘.css’)) { if (name.endsWith(this.userOptions.target)) { // 获取处理之前的内容 const contents = compilation.assets[name].source() // 将原来的内容，通过正则表达式，删除注释 const noComments = contents.replace(/\/*[\s\S]?\\//g , ‘’) // 将处理后的结果，替换掉 compilation.assets[name] = { source: () => noComments, size: () => noComments.length } } } } ) } } module.exports = MyPlugin

使⽤⾃定义插件

// 引⼊⾃定义插件 const MyPlugin = require(‘./plugin/MyPlugin’) module.exports = (env, argv) => { // 插件配置 plugins: [ // 引⼊⾃定义插件 new MyPlugin({ target: ‘.css’ }) ] }