[DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future

报错详细

(node:9776) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use node --trace-deprecation ... to show where the warning was created)

---

分析

Compilation.assets will be frozen in future 就是 Compilation.assets 将来的webpack的版本中会被冻结，建议在 compilation 的 seal 阶段去处理资源。（也就是说他建议可以在，资源压缩之后，冻结之前，对资源进行处理，但是 compilation 可能会触发多次）

compiler.hooks.emit.tapAsync("pluginName", (compilation) => {})

打包终止原因是 异步钩子，需要调用回调，webpack 才会继续往下执行

• 改用 tap 注册钩子
• 或者添加 callback，并调用

// 添加 callback
class AnalyzeWebpackPlugin {
  apply(compiler) {
    // hooks_emit
    compiler.hooks.emit.tapAsync("AnalyzeWebpackPlugin", (compilation, callback) => {
      const assets = Object.entries(compilation.assets);
      let source = "# 分析打包资源大小 \n| 名称 | 大小 |\n| --- | --- |";
      assets.forEach(([fileName, file]) => {
        source += `\n| ${fileName} | ${file.size()} bit |`;
      });

      // add .md
      compilation.assets["analyze.md"] = {
        source() {
          return source;
        },
        size() {
          return source.length;
        },
      };
      callback();
    });
  }
}

module.exports = AnalyzeWebpackPlugin;

之后就可以打包成功了，但可能打包之后仍然会有警告👀，这里可以暂时忽略

对于这里找到的解决方案是，npm i Html-webpack-plugin@next，去安装最新的预设，因为只有Html-webpack-plugin@next才支持webpack5，不过我安装的时候好像报错了…🤔