目标

用html-webpack-plugin来生成静态的页面，但是想知道每个静态页面有那些css和js文件，生成一个静态的配置文件。先把底下的文章都浏览了一遍。html-webpack-plugin本身也提供与webpack一致的插件钩子，所以这个插件把html-webpack-plugin就包含进来了。

代码

  1. const HtmlWebpackPlugin = require('html-webpack-plugin');
  2. class WebpackAssetsList {
  3.   assets = {};
  4.   filename = 'config.json';
  6.   constructor (filename) {
  7.     if (filename) {
  8.       this.filename = filename;
  9.     }
  10.   }
  12.   apply (compiler) {
  13.     compiler.hooks.compilation.tap('WebpackAssetsList', (compilation) => {
  14.       HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapAsync(
  15.         'WebpackAssetsList',
  16.         (data, cb) => {
  17.           const outputName = data.outputName;
  18.           const assetTags = data.assetTags;
  19.           const item = {
  20.             scripts: [],
  21.             styles: []
  22.           }
  23.           assetTags.scripts.forEach(sub => {
  24.             item.scripts.push(sub.attributes.src);
  25.           })
  26.           assetTags.styles.forEach(sub => {
  27.             item.styles.push(sub.attributes.href);
  28.           })
  29.           this.assets[outputName] = item;
  31.           // 往 compilation.assets 中添加清单文件
  32.           const content = JSON.stringify(this.assets, null, 4);
  33.           compilation.assets[this.filename] = {
  34.             // 写入新文件的内容
  35.             source: function () {
  36.                 return content;
  37.             },
  38.             // 新文件大小（给 webapck 输出展示用）
  39.             size: function() {
  40.                 return content.length;
  41.             }
  42.           }
  43.           cb(null, data);
  44.         }
  45.       )
  46.     })
  47.   }
  48. }
  50. module.exports = WebpackAssetsList

总结

网上找的图片，直观的理解一下：
TB1GVGFNXXXXXaTapXXXXXXXXXX-4436-4244.jpg
看起来插件也是一个方法，只是固定提供一个 apply 方法，通过wepack提供的生命周期的钩子函数来处理对应的内容。

参考文档：