Webpack-dev-server live reload 实时重载功能失效问题求助

以下是你配置中导致失效的问题及修改方法： #

必须修改的配置项 #

1. target配置错误
   你将打包目标设为了node，这是服务端打包的配置，前端浏览器项目需要改为web，同时删除只适用于服务端的nodeExternals相关配置：

// 删除这两行
// target: "node",
// externals: [nodeExternals()],
// 新增
target: "web",

该配置错误会导致webpack-dev-server的重载客户端代码无法在浏览器正常运行，是失效的核心原因。

2. devServer资源目录配置不匹配
   你的打包产物统一输出到./dist目录，但当前devServer监听的是./src目录，需要修改devServer配置：

devServer: {
    port: 3000,
    open: true,
    // webpack 4及以下版本用contentBase
    contentBase: path.join(__dirname, "./dist"),
    // webpack 5版本替换为static配置
    // static: path.join(__dirname, "./dist"),
    watchContentBase: true,
    liveReload: true,
    hot: false, // 明确关闭HMR，符合你的需求
}

如果用的是webpack 5，inline配置已经被废弃，可以直接删除。 #

可选修复项 #

你定义开发环境判断变量时存在拼写错误，会导致后续生产环境相关配置失效，建议修改：

// 原写法少了一个E，错误为NOD_ENV
const isDevelopment = process.env.NODE_ENV !== "production";

如果修改后CSS修改还是无法触发重载，开发环境可以把CSS规则中的MiniCssExtractPlugin.loader替换为style-loader，该加载器对实时重载的兼容性更好，生产环境再切换回MiniCssExtractPlugin即可。 #

修改完成后重启webpack-dev-server即可生效，修改代码后会自动触发编译，编译完成浏览器自动刷新。

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