【练习--添加编译时的文件列表】

在webpack编译输出的文件中，添加一个filetxt.txt文件,文件内容是

文件名

文件大小

src/index.js和a.js

//a.js
module.exports = "module A";

//index.js
const A = require("./a");
console.log("我是入口文件");

plugins/FilePlugin.js

module.exports = class FilePlugin {
  constructor(filename = "file.txt") {
    this.filename = filename;
  }

  apply(compiler) {
    console.log("我是fileplugin插件");
      //在最终生成文件的时候干预webpack
    compiler.hooks.emit.tap("FilePlugin", (compilation) => {
      console.log("emit的assets", compilation.assets);

      //将文件合并在一个数组
      let filelist = [];
      for (let key in compilation.assets) {
        let content = `【${key}】
size:${compilation.assets[key].size()}`;
        filelist.push(content);
      }

      //添加文件
      let str = filelist.join("\n\n");
      compilation.assets[this.filename] = {
          //source是文件输出的内容
        source: function () {
          return str;
        },
          //size是文件的大小
        size: function () {
          return str.length;
        },
      };
    });
  }
};

webapck.config.js

const FilePlugin = require("./plugins/FilePlugin");

module.exports = {
  mode: "development",
  devtool: "source-map",
  plugins: [new FilePlugin("fileMd.txt")],
};

最终结果

dist文件夹下多出了fileMd.txt

【main.js】
size:4157

【main.js.map】
size:3835