createapp.dev生成的Webpack项目启动报Invalid configuration错误如何解决

根因定位 #

报错是webpack配置的plugins数组存在语法瑕疵导致的：你提供的配置中，HtmlWebpackPlugin实例声明结束后存在连续的两个逗号，这会在插件数组中插入一个空值项，webpack在校验配置格式时，将该空值识别为无效插件，触发了schema校验报错。

修复步骤 #

1. 找到webpack配置里的plugins数组段，定位到HtmlWebpackPlugin的声明位置
2. 删除HtmlWebpackPlugin结束后的多余逗号，仅保留一个分隔逗号即可

错误代码片段 #

new HtmlWebpackPlugin({
  templateContent: ({ htmlWebpackPlugin }) => '<!DOCTYPE html><html><head><meta charset="utf-8"><title>' + htmlWebpackPlugin.options.title + '</title></head><body><div id="app"></div></body></html>',
  filename: 'index.html',
}),, // 此处多了一个多余逗号

修复后代码片段 #

plugins: [
  new CopyPlugin({
    patterns: [{ from: 'src/index.html' }],
  }),
  new HtmlWebpackPlugin({
    templateContent: ({ htmlWebpackPlugin }) => '<!DOCTYPE html><html><head><meta charset="utf-8"><title>' + htmlWebpackPlugin.options.title + '</title></head><body><div id="app"></div></body></html>',
    filename: 'index.html',
  }),
  new BundleAnalyzerPlugin({
    analyzerMode: 'static',
    openAnalyzer: false,
  }),
  new MiniCssExtractPlugin(),
  new CleanWebpackPlugin()
]

验证 #

修改完成后保存配置文件，重新执行npm run start即可正常启动项目。

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