Webpack从v2升级至v4遇Chunk.blocks报错，求助修复方案

这个问题我之前帮同事排查过，完全是因为旧版本HtmlWebpackPlugin和Webpack 4的API不兼容导致的，直接按下面的步骤来就能搞定：

1. 升级HtmlWebpackPlugin到兼容版本 #

Webpack 4对插件的内部API做了不少重构，其中就废弃了Chunk.blocks属性，改用ChunkGroup.getBlocks()方法。旧版的HtmlWebpackPlugin还在调用废弃的API，所以必须升级到适配Webpack 4的版本：

• 如果你用npm，执行命令：

  npm install html-webpack-plugin@4.x --save-dev
  

  （4.x系列是专门适配Webpack 4的，5.x系列对应Webpack 5，别装错了）
• 如果你用yarn，对应命令：

  yarn add html-webpack-plugin@4.x --dev
  

2. 检查并调整HtmlWebpackPlugin的配置 #

升级插件后，有些旧配置项可能已经被废弃或默认值改变，需要微调：

• 比如之前常用的chunksSortMode: 'dependency'，在新版本里默认是auto，而且dependency模式已经被移除，建议直接删掉这个配置，或者显式设置为auto：
  旧配置：

  new HtmlWebpackPlugin({
    filename: 'index.html',
    chunksSortMode: 'dependency'
  })
  

  新配置：

  new HtmlWebpackPlugin({
    filename: 'index.html'
    // 删掉chunksSortMode，默认就是auto
  })
  

• 其他如果有自定义模板或chunk配置，也可以对照插件的版本文档确认是否需要调整，但大部分基础配置不用改动。

3. 清理缓存重新构建 #

有时候node_modules里的残留缓存会干扰新依赖的运行，建议彻底清理后重新安装：

# 删除依赖包和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 重新执行构建
npm run build

为什么会出现这个错误？ #

Webpack 4重构了Chunk相关的内部逻辑，把Chunk.blocks这个属性标记为废弃，换成了ChunkGroup.getBlocks()方法。旧版本的HtmlWebpackPlugin还在使用废弃的API调用，所以触发了这个报错，升级插件到适配Webpack 4的版本后，插件内部就会使用新的API，问题自然解决。

内容的提问来源于stack exchange，提问作者Stepan Suvorov