Webpack5搭配Dev-Server启用HMR时浏览器控制台报错问题求助

问题修复方案 #

• 移除entry配置中手动注入的HMR相关入口，webpack-dev-server v4 开启hot: true后会自动注入依赖，重复注入会导致逻辑冲突。修改后的entry配置如下：

entry: {
    main: [
        `${options.SRC_DIR}styles/main.scss`,
        `${options.SRC_DIR}main.js`,
    ]
}

• 修改devServer配置中的client字段，不要设置为false。该参数控制客户端和devServer的通讯链路，关闭后会导致HMR消息无法正常传递，直接删除该配置项即可使用默认值，或者设置为true。
• 调整样式加载规则，开发环境优先使用style-loader代替mini-css-extract-plugin的loader，后者的HMR兼容逻辑在webpack5下容易触发冲突，生产环境再切换为mini-css-extract-plugin的loader即可。如果必须在开发环境使用该插件，需要在loader配置中开启HMR支持：

{
  loader: MiniCssExtractPlugin.loader,
  options: {
    hmr: true,
    runtimeSupport: true
  }
}

• 手动在webpack配置的plugins数组中添加HotModuleReplacementPlugin，通过Node API启动webpack时部分场景不会自动注入该插件：

plugins: [
  new webpack.HotModuleReplacementPlugin()
]

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