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

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

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

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

  1. 定义javascript命名函数
  2. 给这个函数的prototype添加apply方法
  3. 在这个方法内我们可以勾入webpack暴露的钩子,这些钩子主要由compiler,compilation两个对象暴露
  4. 在某个需要勾入的构建回调中加入自己的处理函数,处理需要处理的资源
  5. 处理完成后调用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插件,可以探讨一下

你可能感兴趣的:(大前端工程化之写一个简单的webpack插件)