Webpack HMR插件执行npm run build/dev时触发配置错误求助

这个问题我之前也碰到过！核心问题出在你用isProduction && ...和isDevelopment && ...的方式添加插件时，当对应的模式不匹配，数组里会混入false（或undefined，取决于你的变量定义）这类无效值，而Webpack要求plugins数组的每一项必须是有效的插件实例或者函数，这就触发了那个Schema不匹配的错误。

下面给你两个可行的解决方案：

方案1：用filter(Boolean)过滤无效值 #

最简单的修复方式就是在plugins数组末尾加上.filter(Boolean)，它会自动移除数组里的false、undefined、null等假值，只保留有效的插件实例：

plugins: [
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin(
    Object.assign({}, { inject: true, template: publicDir + '/index.html', }, isProduction ? { minify: { removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, keepClosingSlash: true, minifyJS: true, minifyCSS: true, minifyURLs: true, }, } : undefined)),
  isProduction && new MiniCssExtractPlugin({ filename: 'styles/[name].[contenthash:8].css', chunkFilename: 'styles/[name].[contenthash:8].chunk.css', }),
  isDevelopment && new webpack.HotModuleReplacementPlugin(),
].filter(Boolean)

方案2：分模式构建插件数组 #

如果觉得过滤的方式不够直观，也可以把基础插件、生产插件、开发插件分开定义，再根据模式合并：

// 基础插件（所有模式都需要的）
const basePlugins = [
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin(
    Object.assign({}, { inject: true, template: publicDir + '/index.html', }, isProduction ? { minify: { removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, keepClosingSlash: true, minifyJS: true, minifyCSS: true, minifyURLs: true, }, } : undefined))
];

// 生产模式专属插件
const productionPlugins = [
  new MiniCssExtractPlugin({ filename: 'styles/[name].[contenthash:8].css', chunkFilename: 'styles/[name].[contenthash:8].chunk.css', })
];

// 开发模式专属插件
const developmentPlugins = [
  new webpack.HotModuleReplacementPlugin()
];

// 根据当前模式合并插件数组
const plugins = isProduction 
  ? [...basePlugins, ...productionPlugins] 
  : [...basePlugins, ...developmentPlugins];

之后在你的Webpack配置对象里直接使用plugins这个变量就好了。

额外小提示 #

启用HotModuleReplacementPlugin后，别忘了在webpack-dev-server的配置里开启热更新，否则热替换功能不会生效：

devServer: {
  hot: true,
  // 其他devServer配置项...
}

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