webpack(8) plugin

loader和plugin的区别:

    loader是转换代码的, 从一种代码(less, 图片)转成另一种代码(css, src的base64格式);

    plugin:  注册编译器的各种事件,干预webpack的编译过程. 

                  当一些操作要嵌入到webpack的编译流程中,而这些操作不涉及到代码转换, (webpack的编译过程是有许多事件的, 可以注册事件,在事件回调函数中写入这些操作的功能)

           比如webpack编译启动时, 要生成一句话:webpack启动了

            当webpack打包完后, 要输出一个文件记录所有编译过的文件.

 

 

 

 手动编写一个plugin

module.exports = class MyPlugin{
   apply(compilier){            apply函数是固定的, 执行的时机: 在初始化阶段, 创建完compiler对象后会立即执行.
     console.log("我是插件");
   }
} 

//webpack.config.js配置文件
const path = require("path");
const MyPlugin = require("./src/plugin/Myplugin")
module.exports = {
  plugins:[
    new MyPlugin()
  ],

apply方法, 只能在初始化时候, 执行一次, 以后无论怎么watch打包,都不会执行, 类似window.onload

 

 

关于plugin的一个例子

class FileListPlugin {
  constructor(filename){ //可以在使用插件时传参
     this.filename = filename;
  }
  apply(compiler) {
    // emit is asynchronous hook, tapping into it using tapAsync, you can use tapPromise/tap(synchronous) as well
    compiler.hooks.emit.tapAsync('FileListPlugin', (compilation, callback) => {
      // Create a header string for the generated file:
      var filelist = 'In this build:\n\n';

      // Loop through all compiled assets,
      // adding a new line item for each filename.
      for (var filename in compilation.assets) {
        filelist += '- ' + filename + '\n';
      }

      // Insert this list into the webpack build as a new file asset:
      compilation.assets[this.filename] = {
        source: function () {
          return filelist;
        },
        size: function () {
          return filelist.length;
        },
      };

      callback();
    });
  }
}

module.exports = FileListPlugin;