如何开发webpack插件

webpack是我们平时工作中必不可少的工具，难免有时候需要对webpack编译的代码进行个性化处理操作
Compiler包含 webpack 环境的所有配置信息Compilation包含整个编译过程中所有环节对应的方法
Compiler 代表着 webpack 从启动到关闭的整个生命周期，而 Compilation 只代表一次编译，而修改源码的时机正好需要在编译的过程中修改
插件提供了丰富的生命周期，在修改源码过程中也要特别注意插件的生命周期带来的影响，比如上述在 optimizeChunkAssets 阶段，这个阶段拿到的 chunk 资源已经完成各种 Loader 的处理，这个时候如果新增源码内容是 ES6，将不会再被转化。
目标：用来删除打包文件 (dist/*.js) 的注释
webpack 要求插件，必须是一个函数或者是一个包含 apply 方法的对象
emit 钩子：是 webpack 即将往输出目录输出时执行的钩子函数
第一步：在 webpack.config.js 里面定义插件并加载插件

// 定义插件：MyPlugin
class MyPlugin {
    
    
    // apply()在webpack启动过程中自动被调用，它接收一个compiler对象
    // 该对象包含此次构建过程中所有的配置信息，我们也是通过该对象注册构子函数
   apply (compiler) {
    
    
      // 通过compiler的hooks属性访问到emit钩子，通过tap方法注册一个钩子函数
      // tap()接收2该参数，1: 插件名称；2:挂载到钩子上的函数
      compiler.hooks.emit.tap('myPlugin', compilation => {
    
    
         // compilation===>可以理解为此次打包的上下文
         for (const name in compilation.assets) {
    
    
             console.log(name) // dis文件下所有文件名称
             console.log(compilation.assets[name].source())  //  dis文件下所有文件内容
             // 只针对js文件进行处理，去调注释
             if (name.endswith('.js')) {
    
    
                 const contents = compilation.assets[name].source()
                 const withoutComments = contents.replace(/\/\*\*+\*\//g, '')
                 compilation.assets[name] = {
    
    
                     source: () => withoutComments,
                     size: () => withoutComments.length                 
                 }         
             }     
         }               
      }) 
   }  
}
// 加载插件
plugins: [
   new MyPlugin() // 加载自定义插件MyPlugin用来将打包文件下js文件里面注释去除
]


执行： webpack    (webpack打包命令）
结果： webpack 生成的打包文件  dist/bundler.js 里面的 注释没有了

//webpack实现加log插件

class LogWebpackPlugin{
    
    
    constructor(doneCallback,emitCallback){
    
    
       this.emitCallback = emitCallback;
       this.doneCallback = doneCallback;
    }
    apply(compiler){
    
    
        compiler.hooks.emit.tap('LogWebpackPlugin',()=>{
    
    
            //在 emit 事件中回调 emit Callbackthis.emitCallback()
        })
        compiler.hooks.done.tap('LogWebpackPlugin',()=>{
    
    
            //在 done 事件中回调 done Callbackthis.emitCallback()
        })
        compiler.hooks.compilation.tap('LogWebpackPlugin',()=>{
    
    
            // compilation（'编译器'对'编译ing'这个事件的监听）
        })
        compiler.hooks.compile.tap('LogWebpackPlugin',()=>{
    
    
            // compile（'编译器'对'开始编译'这个事件的监听）
        })
    }
}
module.exports = LogWebpackPlugin

//在webapck中引入

//引入插件
const LogWebpackPlugin = require('./public/plugins/logWebpackPlugin');
module.exports = {
    
    
    plugins:[
        new LogWebpackPlugin(()=>{
    
    
            console.log('emit事件发生了，所有模块和代码对应的文件已经生成好')
        },()=>{
    
    
            console.log('done事件发生了，成功构建完成')
        })
    ]
}

//webpack实现去log插件

class myPlugin{
    
    
    constructor(options){
    
    
       this.options = options;
       this.externalModules = {
    
    }
    }
    apply(compiler){
    
    
        var reg = /("([^\"]*(\.)?)*")|('([^\']*(\.)?)*')|(/{2,}.*?(\r|\n))|(/*(\n|.)*?*/)|(/******/)/g;
        compiler.hooks.emit.tap('CodeBeautify',(compilation)=>{
    
    
            Object.keys(compilation.assets).forEach(data => {
    
    
                let content = compilation.assets[data].source() //获取处理的文本
                content = content.replace(reg,(word)=>{
    
    })
                compilation.assets[data] = {
    
    
                    source(){
    
    
                        return content
                    },
                    size(){
    
    
                        return content.length
                    }
                }
            })
        })
    }
}
module.exports = myPlugin

如何开发webpack插件

猜你喜欢