大前端工程化之写一个简单的webpack插件

落寞的鱼丶

发布于 2022-02-17 10:29:56

3790

发布于 2022-02-17 10:29:56

文章被收录于专栏：afjhahfhahajk

今天写一个简单的webpack插件，来学习一下webpack插件

webpack插件机制可以使开发者在webpack构建过程中加入自己的行为，来针对自己项目中的一些需求做一些定制化

首先我们得知道一个插件是如何组成的：

定义javascript命名函数
给这个函数的prototype添加apply方法
在这个方法内我们可以勾入webpack暴露的钩子，这些钩子主要由compiler，compilation两个对象暴露
在某个需要勾入的构建回调中加入自己的处理函数，处理需要处理的资源
处理完成后调用webpack提供的回调

上面提到的 compiler 和 compilation 是插件开发中用到的两个重要对象，我理解为compiler代表整个webpack的配置对象，在webpack启动时就建立，compilation代表单次构建的对象，每次文件的更改都会创建一个新的compilation对象，可能阐述的不是很完全，可以参照webpack官方文档

compiler 和 compilation 这两个对象都扩展自Tapable类，在触碰他们的钩子时根据钩子触发的时机调用不同的方法，主要有tap，tapAsync，tapPromise三个方法，调用形式都是

compilation.hooks.someHook.tap(/* ... */);

说了这么多，可以通过代码加深一下印象，来加深一下插件基本的组成和使用

// webpack插件先定义一个js函数
function MyPlugin(options) {

}

// 然后在这个函数的prototype添加apply方法
MyPlugin.prototype.apply = function (compiler) {
    compiler.hooks.emit.tapAsync('MyPlugin',function(compilation, callback) {
        // 在生成文件中，创建一个头部字符串：
        var filelist = 'In this build:\n\n';
    
        // 遍历所有编译过的资源文件，
        // 对于每个文件名称，都添加一行内容。
        // 在这里我们可以做一些我们想做的事情
        for (var filename in compilation.assets) {
          filelist += ('- '+ filename +'\n');
        }
    
        // 将这个列表作为一个新的文件资源，插入到 webpack 构建中：
        compilation.assets['filelist.md'] = {
          source: function() {
            return filelist;
          },
          size: function() {
            return filelist.length;
          }
        };
    
        callback();
      });
}

module.exports = MyPlugin

const path = require('path')
const MyPlugin = require('./js/plugins/myPlugin')

module.exports = {
    entry: {
        main: './js/main',
        index:'./js/index'
    },
    output: {
        filename:'[name]-[hash].js',
        path:path.join(__dirname,'dist')
    },
    plugins:[
        new MyPlugin() //此处调用插件
    ]
}

大家有么有在项目中有自己写过webpack插件，可以探讨一下😊

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

webpack